如何为svg元素路径赋予背景颜色？答案

【问题标题】：How to give background color to svg element path?如何为svg元素路径赋予背景颜色？
【发布时间】：2017-12-19 10:26:47
【问题描述】：

我已将图像转换为 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 任何正文都可以转换并用颜色填充路径吗？

【问题讨论】：

问题是您的 SVG 没有任何“内部”。您的 SVG 实际上就是您所说的边框。你不能为里面的东西设置颜色，因为它不是你的 SVG 的一部分。
您能否将内部方法添加到任何解决方案中，因为我不是 svg 专家，请您考虑一些棘手的问题
您能否为它添加一些值或逻辑以用于内部颜色
我们可以在它的背景中添加图片吗

标签： html css svg svg.js

【解决方案1】：

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

您的图片中指定了一个“洞”。这是您的代码中的路径，以m1007 开头并以-251z 结尾-由于规范：“M 表示移动，... z 表示关闭路径）”.. 如果删除该部分，您将具有内部没有间隙的整个形状。

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

【讨论】：

你怎么猜我有很多类似的 svg 有任何在线工具或快捷方式来检查整个路径，所以我从路径中删除它..
背后的科学是什么，所以我也纠正了我的其他图像..很快
我不知道有任何在线工具可以做到这一点。您可以使用一些用于矢量图形的应用程序（例如 Adobe Illustrator 或 Inkspace）。或者，如果您想直接在代码中执行此操作，只需在 path 中查找 M 和 Z。由于specification：“M 表示移动，...z 表示关闭路径）”。如果您不想自动执行此操作，您可能会写一些 regexp 来删除 path 的那部分。
jsfiddle.net/qhqa4kyq/6 真正的问题想用颜色填充矩形是没有问题的路径有
所以你需要改变你的形状，就像我上面描述的那样。方法如下：jsfiddle.net/norin89/qhqa4kyq/8 - 我只留下了一条路径，因此您可以看到不同之处。首先删除路径的内部部分（全部从M 到Z）所以内部也是你的路径。并设置fill、stroke-width和stroke属性。就是这样！