填充 SVG 路径的背景色，但是填充不起作用。

Question

填充 SVG 路径的背景色，但是填充不起作用。

8

我需要在SVG中创建一个对话框。

无法填充svg路径的背景。我需要为此路径填充背景颜色。填充只会着色边框，就像描边一样。

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0 M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z " id="path5"/>
    <text x="15" y="32" fill="black">My Level</text>
  </g>
</svg>

- Atul Sharma

3个回答

6

这应该可以工作：

<path style="fill:red;fill-opacity:1;" ...>

从评论中编辑：

哦，现在我知道问题出在哪里了。这个形状是用空的内部空间定义的。请将d属性替换为以下内容：

d="m 46.387286,-0.35714286 c 22.108,0 40.03,12.47499986 40.03,27.86199986 0,15.387 -17.922,27.862 -40.03,27.862 -6.931,0 -13.449,-1.227 -19.134,-3.384 -11.22,4.224 -26.53900028,12.202 -26.53900028,12.202 0,0 9.98900028,-5.655 14.10700028,-12.521 1.052,-1.755 1.668,-3.595 2.021,-5.362 -6.51,-4.955 -10.4850003,-11.553 -10.4850003,-18.797 0,-15.387 17.9220003,-27.86199986 40.0300003,-27.86199986"

- cdm

2

哦，现在我知道问题出在哪里了。形状是用空的内部空间定义的。请使用以下内容替换d属性：d="m 46.387286，-0.35714286 c 22.108,0 40.03,12.47499986 40.03,27.86199986 0,15.387 -17.922,27.862 -40.03,27.862 -6.931,0 -13.449,-1.227 -19.134,-3.384 -11.22,4.224 -26.53900028,12.202 -26.53900028,12.202 0,0 9.98900028,-5.655 14.10700028,-12.521 1.052,-1.755 1.668,-3.595 2.021,-5.362 -6.51,-4.955 -10.4850003,-11.553 -10.4850003,-18.797 0,-15.387 17.9220003,-27.86199986 40.0300003,-27.86199986"。 - cdm

非常感谢！运行得很好。但是，你是如何找到这个的？ - Atul Sharma

我下载了这张图片并在Inkscape中打开。很明显。 - cdm

@cdm 我该如何使用Inkscape修改右侧d属性？ - Eric des Courtis

1

通常在这些情况下发生的是，你认为是线条的东西实际上只是 svg 本身的主体。如果你编辑组成 svg 的点，你可能会发现周围有一圈点，内部有一组同心圆的点。如果你删除内部的点，你会看到一个实心的形状。

- reabow

有没有自动完成这个操作的方法？比如“extractOuterPath”函数或类似的东西？我的意思是，如果我事先不知道我正在处理哪个SVG文件，因此无法手动在Inkscape中打开它以查看路径的哪些节点仅属于外部线条以将其与其他部分分离。 - DDRRSS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- maioman · Accepted Answer

在您的路径的d属性中，实际上有2个路径，
默认路径（d属性）的行为是以递归方式从最外部的形状中减去任何其他形状（留下未填充的减去区域），请看这个例子。

在您的情况下，最简单的解决方案是分割路径：

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0" />
<path fill='yellow' d="M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z " id="path5"/>
    <text x="15" y="32" fill="black">My Level</text>
  </g>
</svg>