如何给svg元素路径赋予背景颜色？

我已经转换图像SVG和得到像下面如何给svg元素路径赋予背景颜色？

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" 
width="122.000000pt" height="98.000000pt" viewBox="0 0 122.000000 98.000000" 
    preserveAspectRatio="xMidYMid meet"> 
<metadata> 
Created by potrace 1.14, written by Peter Selinger 2001-2017 
</metadata> 
<g transform="translate(0.000000,98.000000) scale(0.100000,-0.100000)" 
fill="#000000" stroke="none"> 

<path d="M93 873 c-7 -3 -6 -653 0 -660 5 -4 889 -185 892 -181 1 1 35 69 74 
151 l71 147 0 273 0 272 -515 0 c-283 0 -518 -1 -522 -2z m1007 -284 l0 -251 
-66 -139 c-59 -122 -70 -138 -88 -134 -12 3 -106 23 -211 46 -104 22 -219 47 
-255 54 -36 8 -85 21 -109 30 -24 8 -56 15 -70 15 -15 0 -49 7 -75 16 -26 9 
-58 14 -71 12 -15 -3 -26 0 -29 9 -4 8 -6 145 -6 304 l0 289 490 0 490 0 0 
-251z" style="fill:green;background-color:red"/> 

</g> 
</svg>

我要的是给用颜色填充路径上的任何颜色的路径矢量但是当我使用填补它只是改变边框的颜色不内完整路径节点的颜色。我试过

style="fill:green;background-color:red"

但是不能工作只能改变边界而不是内部？这里是jsfiddle链接Link to example可以任何身体转换和填充颜色的路径？

来源

2017-07-14 nouman arshad

的事情是，你的SVG没有任何“内部”。你的SVG实际上就是你所说的边界。您不能为内部设置颜色，因为它不是SVG的一部分。 – norin89

你可以请内心如何解决任何问题，因为我不是svg专家请做一些考虑棘手 –

你可以添加一些价值或逻辑到它的内在颜色 –

问题是您的SVG没有任何“内部”。你的SVG实际上就是你所说的边界。你不能为里面的内容设置颜色，因为它不是你的SVG的一部分。

在图像中指定了一个“洞”。这是您的代码从m1007开始并以-251z结尾的路径 - 由于规格说明：“M表示移动到...，而z表示近距离路径）”。如果删除该部分，则将具有整个形状没有内部的空隙。

https://jsfiddle.net/norin89/qhqa4kyq/4/

来源

2017-07-14 11:22:03 norin89

你如何猜测我有许多类似的SVG有任何在线工具或快捷方式来检查整个路径，所以我删除从路径.. –

什么科学背后，所以我也纠正我的其他图片..快速 –

我不知道任何在线工具做到这一点。您可以使用一些应用程序来制作矢量图形（例如Adobe Illustrator或Inkspace）。或者，如果您想直接在代码中执行，只需在'path'中查找'M'和'Z'。由于[规范]（https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation）：“M表示移动到...，而z表示近距离路径）”。如果你不想自动执行，你可能会写一些'regexp'来为你删除那部分'path'。 – norin89

如何给svg元素路径赋予背景颜色？

回答

相关问题