填充 svg 路径背景。填充不工作答案

【问题标题】：Fill svg path background. Fill not working填充 svg 路径背景。填充不工作
【发布时间】：2016-08-02 15:51:29
【问题描述】：

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

【问题讨论】：

标签： html css svg stroke jquery-svg

【解决方案1】：

这应该可行：

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

从 cmets 编辑：

哦，现在我知道问题出在哪里了。形状由空的内部空间定义。将 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"

【讨论】：

哦，现在我知道问题出在哪里了。形状由空的内部空间定义。替换D属性：D =“M 46.387286，-0.35714286 C 22.108,040.03,12.47499986 40.03,27.86199986 0.03,862 -17.922,27.862 -17.922,27.862 -17.922,27.862 -40.03,27.862 -6.931,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.98900028，-5.655 14.10700028，-12.521 1.05228，-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"
非常感谢！像魅力一样工作。比特，你是怎么找到这个的？
我下载了图像并在 Inkscape 中打开它。很明显。
@cdm 如何用 Inkscape 修改右 d 属性？

【解决方案2】：

在路径的 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>

【讨论】：

D =“M 43.762513,1.2930698 C 0.22.1482,0 -33.2231,15.3006702 -11.07409982,15.30067 -11.0740982,35.70156 0,51.00224 9.71264,13.41956 33.2231,15.30067 33.22231,15.30067 L 5.29338， 29.79819 11.31778，-29.79819 77.518717,0ç0,0 22.14822,0 33.2223，-15.30067 11.07411，-15.30068 11.07411，-35.70157 0，-51.00224ç160.04061,1.2930698 137.89239,1.2930698 137.89239,1.2930698升-94.129877,0 Z“跨度>

【解决方案3】：

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

【讨论】：

有没有办法自动做到这一点？像“extractOuterPath”功能或类似的东西？我的意思是，如果我事先不知道我正在处理哪个 SVG，所以我无法在 Inkscape 中手动打开它以查看路径的哪些节点仅属于外线以将其与其余节点分开。