填充 svg 路径背景。填充不起作用

Question

我需要在 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>

Answer 1

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

Answer 2

这应该有效：

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

根据评论编辑：

哦，现在我明白问题出在哪里了。形状定义为内部为空 space。将 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"

Answer 3

在您的路径的 d 属性中，您实际上有 2 条路径，
默认路径（ d 属性）行为是以递归方式减去最外部形状内的任何其他形状（留下未填充的减去区域），look at this example.

对于您的情况，最简单的解决方案是划分路径：

<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>

填充 svg 路径背景。填充不起作用

Fill svg path background. Fill not working

html

css

svg

stroke

jquery-svg