程序设计 svg

14

已关闭。这个问题是基于观点的。它当前不接受答案。想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引文回答。 6年前关闭。改善这个问题我正在使用SVG和JavaScript / jQuery构建交互式界面，并且试图在Raphael和jQuery SVG之间做出选择。我想知道两者之间的权衡是什么发展势头似乎在哪里。我不需要Raphael中的VML / IE支持，也不需要jQuery SVG的绘图功能。我主要对在SVG画布上创建，设置动画和操作单个项目的最优雅方式感兴趣。

254 javascript jquery svg raphael

11

如何在div中居中SVG？

我有一个要在div中居中的SVG。div的宽度为900px。SVG的宽度为400像素。SVG的margin-left和margin-right设置为auto。不起作用，它的作用就像是左边距为0（默认值）。有人知道我的错误吗？

252 css layout svg positioning margin

8

有没有一种方法可以将SVG用作伪元素：before或：after中的内容

我想在某些选定元素之前放置一些SVG图像。我正在使用JQuery，但这无关紧要。我想将：before元素设置为： #mydiv:before { content:"<svg.. code here</svg>"; display:block; width:22px; height:10px; margin:10px 5px 0 10px; } 如果我如上所示进行操作，它将仅显示字符串。我检查了规格，似乎对内容有一些限制。是否可以解决此限制？只有内容CSS与我的问题有关。

245 css svg

7

如何使用其父容器制作svg秤？

当大小为非本机时，我想要一个内联svg元素的内容比例。当然，我可以将其作为单独的文件并像这样进行缩放。 index.html： <img src="foo.svg" style="width: 100%;" /> foo.svg： <svg width="123" height="456"></svg> 但是，我想通过CSS向SVG添加其他样式，因此链接外部样式不是一种选择。如何制作嵌入式SVG秤？

235 css html svg scaling

12

如何在HTML中创建泪珠？

如何创建这样的形状以显示在网页上？我不想使用图像，因为它们在缩放时会变得模糊我尝试过CSS： .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> 运行代码段隐藏结果展开摘要事实证明真是搞砸了。然后我尝试使用SVG： <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> 运行代码段隐藏结果展开摘要它确实得到了形状，但底部没有弯曲。有没有一种方法可以创建此形状，以便可以在HTML页面中使用它？

222 html css svg css-shapes

10

您可以控制SVG的笔划宽度的绘制方式吗？

当前正在构建基于浏览器的SVG应用程序。在该应用程序中，用户可以设置各种形状和样式，包括矩形。当我将a stroke-width应用于rectsay 的SVG 元素时1px，笔触rect将由不同的浏览器以不同的方式应用于的offset和inset。事实证明这很麻烦，尤其是当我尝试计算矩形的外部宽度和可视位置并将其放置在其他元素旁边时。例如： Firefox会添加1px的插图（底部和左侧）和1px的偏移量（顶部和右侧） Chrome会添加1px的插图（顶部和左侧）和1px的偏移量（底部和右侧）到目前为止，我唯一的解决方案是自己绘制实际边界（可能使用path工具），然后将边界放置在描边元素的后面。但是，此解决方案是一个不愉快的解决方法，如果可能的话，我宁愿不走这条路。所以我的问题是，您可以控制stroke-width在元素上绘制SVG的方式吗？

204 svg offset rect

4

是否需要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标签吗？我尝试过处理那些复杂的对象，如果不包含它们的话，一切都会正常进行。

203 xml svg tags

4

SVG定位

我正在使用SVG，并且在定位方面遇到一些问题。我有一系列包含在g组标记中的形状。我希望像容器一样使用它，因此可以设置它的x位置，然后该组中的所有元素也将移动。但这似乎是不可能的。大多数人如何定位您希望一并移动的一组元素？有相对定位的概念吗？例如相对于其父级

203 svg position grouping

7

如何删除或替换SVG内容？

我有一段JavaScript代码，用于创建（使用D3.js）svg包含图表的元素。我想基于来自使用AJAX的Web服务的新数据来更新图表，问题是每次我单击更新按钮时，它都会生成一个新图表svg，因此我想删除旧的图表或更新其内容。这是我创建的JavaScript函数的片段svg： var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); 如何删除旧svg元素或至少替换其内容？

200 javascript ajax svg d3.js

14

jQuery的追加不适用于SVG元素？

假设： <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'); }); </script> </head> <body> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> </svg> </body> 我为什么看不到任何东西？

199 jquery html svg

8

我可以使用CSS更改svg路径的填充颜色吗？

我有以下代码： <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>&nbsp; </span> 是否可以使用CSS或其他方法更改SVG路径的填充颜色，而无需在path标签内部实际更改它的颜色？

199 css svg

13

如何计算圆弧的SVG路径

给定一个以（200,200）为中心，半径为25的圆，如何绘制从270度到135度的圆弧以及从270度到45度的圆弧？ 0度表示在x轴的右侧（右侧）（表示3点钟位置）270度表示在12点钟位置，90表示在6点钟位置更一般而言，圆弧的一部分圆的路径是什么 x, y, r, d1, d2, direction 含义 center (x,y), radius r, degree_start, degree_end, direction

191 svg

5

SVG：矩形内的文本

我想在 SVG中显示一些文本rect。可能吗？我试过了 <svg xmlns="http://www.w3.org/2000/svg"> <g> <rect x="0" y="0" width="100" height="100" fill="red"> <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text> </rect> </g> </svg> 但这是行不通的。

180 text svg rect

10

如何在SVG矩形中放置和居中放置文本

我有以下矩形... <rect x="0px" y="0px" width="60px" height="20px"/> 我想将“小说”一词放在其中。对于其他矩形，svg换行是否保留在其中？我似乎找不到关于在水平和垂直居中以及自动换行的形状中插入文本的任何具体信息。此外，文本不能离开矩形。查看http://www.w3.org/TR/SVG/text.html#TextElement示例没有帮助，因为文本元素的x和y与矩形的x和y不同。文本元素似乎没有宽度和高度。我不确定这里的数学。（我的html表只是无法使用。）

177 text svg

8

在MarkDown中包含SVG（托管在GitHub上）

我知道可以使用![Alt text](/path/to/img.jpg)或的MD语法将图像放置在MD中![Alt text](/path/to/img.jpg "Optional title")，但是我很难将SVG放置在将代码托管在GitHub上的MD中。最终使用rails3，并且现在经常更改模型，因此我正在使用RailRoady生成模型的架构图的SVG。我希望将该SVG放置在ReadMe.md中并显示出来。当我在本地打开SVG文件时，它确实可以工作，那么如何使浏览器在MD文件中呈现SVG？鉴于代码将是动态的，直到完成为止（似乎永远不会），将SVG托管在单独的地方似乎过高，而且我缺少实现此目的的方法。我想包括SVG是这里在GitHub上：https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg 我尝试了以下操作，并使用实际图像验证了语法是否正常，只是未呈现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"> ![Alt text](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"> 得到以下结果： 1：https：//github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg “概述” Google文件：

173 svg github markdown

Questions tagged «svg»