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

Question

我已经将图像转换为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，任何主体都可以转换和填充颜色的路径吗？

Answer 1

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

你的图像上有一个指定的“洞”。这是代码中以m1007开头并以-251z结尾的路径--根据规范：“M表示移动，...而z表示关闭路径)”。如果你去掉那个部分，你就会得到整个形状，里面没有缝隙。

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