Tag: svg
在MarkDown中包含一个SVG（托pipe在github上）
我知道一个图像可以被放置在一个具有MD语法的MD上或 ，但我很难放置在代码托pipe在Github上的MD的SVG。 最终使用rails3，并经常更改模型，所以我正在使用RailRoady生成模型的模式图的SVG。 我想要那个SVG然后被放置在ReadMe.md中，并被显示。 当我在本地打开SVG文件时，它确实起作用，那么如何让浏览器在MD文件中呈现SVG？ 鉴于代码将是dynamic的，直到它最终确定（似乎从来没有），在一个单独的地方托pipeSVG似乎矫枉过正，我错过了一个方法来实现这一点。 我想包含的SVG在Github上： https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg ： https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg 我已经尝试了下面的实际图像，以validation语法正在工作，只是没有呈现SVG代码： ![Overview][1] [1]: https://github.com/specialorange/FDXCM/blob/master/doc/controllers_brief.svg "Overview" <img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">  [Google Doc](https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit) : <img src="https://docs.google.com/drawings/pub?id=117XsJ1kDyaY-n8AdPS3_8jTgMyITqaoT3-ah_BSc9YQ&w=960&h=720"> <img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg"> <img src="https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit"> 得到以下结果： Google文件 ：
svg的x和dx属性有什么区别？
svg的x和dx属性（或y和dy）有什么区别？ 什么时候使用axis shift属性（dx）和位置属性（x）是适当的时间？ 例如，我注意到很多d3的例子都是这样的 chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3) .text("I am a label") 当下列事情似乎做同样的事情时，设置y和dy的优点或推理是什么？ chart.append("text") .attr("x", 0) .attr("y", -3) .text("I am a label")
转换PDF到干净的SVG？
我试图将PDF转换为SVG。 然而，我正在使用的那个目前正在为每一个文本中的每个字母都映射一个path，这意味着如果我改变其源文件中的文本，它看起来很丑。 我想知道最干净的PDF到SVG转换器是什么，希望没有一个文本区域，根本不需要一个path。 我们知道，PDF和SVG非常相似，所以我认为这里有一些很好的转换器。
有没有一种方法可以将SVG用作伪元素中的内容：before或：after
我想在一些选定的元素之前放置一些SVG图像。 我正在使用JQuery，但这是无关紧要的。 我希望将before元素设置为： #mydiv:before { content:"<svg.. code here</svg>"; display:block; width:22px; height:10px; margin:10px 5px 0 10px; } 如果我这样做，如上所示，它只是显示string。 我检查了规格，似乎有什么内容的限制。 有没有解决这个限制的工作？ 只有内容CSS是与我的问题相关的。
删除SVG文件中的变换
我一直在挣扎，而且似乎找不到任何地方的答案。 我有一个SVG文件，看起来像这样： <svg xmlns:dc="http://purl.org/dc/elements/1.1/" … width="72.9375" height="58.21875" …> … <g … transform="translate(10.75,-308.96875)" style="…"> <path inkscape:connector-curvature="0" d="m -10.254587,345.43597 c 0,-1.41732 0.17692,-2.85384 0.5312502,-3.5625 0.70866,-1.41733 2.14518,-2.82259 3.5625,-3.53125 1.41733,-0.70866 2.11392,-0.70867 3.53125,0 1.41732,0.70866 … z" … /> </g> </svg> 我想删除transform="…"行，但仍然保留我放置在InkScape中的图像。 如果我手动删除变换，图像拉到另一个屏幕的一部分（如预期），但我需要完全摆脱转换，同时，让图像保持我想要的地方。 有没有办法将变换去除/变平path坐标本身？ （我必须处理的唯一变换是平移和缩放，不是matrix。）
SVG中文本元素的垂直alignment
假设我有SVG文件： <svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x='20' y='60' style="font-size: 60px">b</text> <text x='100' y='60' style="font-size: 60px">a</text> </svg> 我想以某种方式alignmenta和b的顶部。 其实，我希望我的定位是根据roofline而不是baseline ！
在html中调整SVG大小？
所以，我有一个HTML格式的SVG文件，其中一个我听说过的格式是放大时不能全部显示。 我知道一个JPEG或任何我可以将它存储为一个50×50的图标，然后实际显示为（相当像素）100×100缩略图（或10×10），手动设置高度和宽度在image_src标签。 然而，SVG文件似乎与object / embed标签一起使用，改变THOSE的高度或宽度只会导致为图片分配更多的空间。 有没有什么办法可以指定你想要的SVG图像显示比实际存储在文件系统中更小或更大？
是否需要SVG参数，如“xmlns”和“版本”？
在互联网上看到的大约一半的svg例子中，代码被简单的<svg></svg>标签所包裹。 另一方面，svg标签有很多复杂的属性，例如： <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 我的问题是：可以使用简单的svg标签吗？ 我尝试过复杂的玩法，如果我不包含它们，一切正常。
我可以用CSS更改svgpath的填充颜色吗？
我有以下代码： <span> <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> <desc></desc> <defs/> <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999……………1,27.68,22.274Z"/> </svg> </span> 是否有可能用CSS或其他方式改变SVGpath的填充颜色，而不实际改变它在path标记内？
在Safari 10中旋转时，SVG会改变颜色
我刚刚遇到一个非常奇怪的问题，只在Safari 10中出现。我有玩纸牌，svg图像，有时使用transform:rotate(xdeg) 。 我正在使用的卡有一个红色块模式。 当它没有旋转，或以直angular旋转，即90,180,270，那么它看起来很正常。 但是，除此之外的任何angular度和背景图案变成蓝色！ 我刚刚从我的一个用户那里得到了一个这样的报告，从来没有看到任何奇怪的东西。 其他浏览器一切正常，Safari 9正常。 我猜这只是Safari 10中一个非常奇怪的错误，但是有关如何解决它的任何想法？ 我已经创build了一个最小的repro： https://jsfiddle.net/2zv4garu/1/
