填充SVG的内部区域

Question

我想用红色将这个SVG的内部着色。

我已经尝试了很长时间，但是没有成功。

我能获得的“最佳”是红色正方形背景。

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="64" height="64"
viewBox="0 0 192 192"
style="">
<g fill="red" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,192v-192h192v192z"></path>
<g>
<g id="surface1">
<path fill="#000" d="M30,24c-9.89063,0 -18,8.10937 -18,18v96c0,9.89063 8.10937,18 18,18h18v29.20313l43.82813,-29.20313h58.17187c9.89063,0 18,-8.10937 18,-18v-96c0,-9.89063 -8.10937,-18 -18,-18zM30,36h120c3.375,0 6,2.625 6,6v96c0,3.375 -2.625,6 -6,6h-61.82813l-28.17187,18.79687v-18.79687h-30c-3.375,0 -6,-2.625 -6,-6v-96c0,-3.375 2.625,-6 6,-6z"></path>
</g>
</g>
</g>
</svg>

是否可以仅填充svg的“内部”部分？

Answer 1

没有附加元素是不可能的，因为您的黑色轮廓已经是一条充满黑色的路径（路径的某些部分朝相反的方向移动，从而创建了“切口”）。

您可以使用该“切口”（省略路径的外部点）作为新路径，并用红色填充，但这会产生白色闪烁，具体取决于显示它的浏览器/应用程序及其显示的大小/分辨率。 。因此，您还必须稍微拉伸红色区域，并将其放在轮廓后面（即SVG标记中轮廓路径的上方）。

<p>notice the small white flicker between the black and red areas:</p>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="64" height="64"
viewBox="0 0 192 192"
style="">
<g fill="transparent" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,192v-192h192v192z"></path>
<g>
<g id="surface1">
<path fill="#000" d="M30,24c-9.89063,0 -18,8.10937 -18,18v96c0,9.89063 8.10937,18 18,18h18v29.20313l43.82813,-29.20313h58.17187c9.89063,0 18,-8.10937 18,-18v-96c0,-9.89063 -8.10937,-18 -18,-18zM30,36h120c3.375,0 6,2.625 6,6v96c0,3.375 -2.625,6 -6,6h-61.82813l-28.17187,18.79687v-18.79687h-30c-3.375,0 -6,-2.625 -6,-6v-96c0,-3.375 2.625,-6 6,-6z"></path>
<path fill="red" d="m 30,35.999999 120,0 c 3.375,0 6,2.625 6,6 L 156,138 c 0,3.375 -2.625,6 -6,6 l -61.82813,0 -28.171871,18.79687 0,-18.79687 L 30,144 c -3.375,0 -6,-2.625 -6,-6 l 0,-96.000001 c 0,-3.375 2.625,-6 6,-6 z"></path>
</g>
</g>
</g>
</svg>
<p>removed by moving the red area behind the black outline and slightly extruding it</p>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="64" height="64"
viewBox="0 0 192 192"
style="">
<g fill="transparent" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,192v-192h192v192z"></path>
<g>
<g id="surface1">
<path fill="red" d="M 29.636719,34.007812 C 23.098354,34.068292 20.806054,41.601182 22,47 22.128176,77.898786 21.749994,108.83302 22.177734,139.71094 23.558462,146.96934 32.465469,146.52475 38,146 c 6.666667,0 13.333333,0 20,0 0,6.84505 0,13.6901 0,20.53516 C 68.651801,159.88528 78.844051,151.72021 89.777344,146 110.59903,145.72479 131.52171,146.51166 152.29102,145.67773 159.96963,143.47366 157.92501,133.84731 158,128 157.8708,98.767959 158.25139,69.500208 157.82227,40.289062 156.44154,33.030656 147.53453,33.475253 142,34 c -37.45439,0.0052 -74.90905,-0.01045 -112.363281,0.0078 z"></path>
<path fill="#000" d="M30,24c-9.89063,0 -18,8.10937 -18,18v96c0,9.89063 8.10937,18 18,18h18v29.20313l43.82813,-29.20313h58.17187c9.89063,0 18,-8.10937 18,-18v-96c0,-9.89063 -8.10937,-18 -18,-18zM30,36h120c3.375,0 6,2.625 6,6v96c0,3.375 -2.625,6 -6,6h-61.82813l-28.17187,18.79687v-18.79687h-30c-3.375,0 -6,-2.625 -6,-6v-96c0,-3.375 2.625,-6 6,-6z"></path>
</g>
</g>
</g>
</svg>

Answer 2

如果您假设图像变化很小-可以通过删除内部子路径形成孔来简化原始路径，只需使用10px黑色笔触和红色填充+去除红色背景即可完成

<svg width="64" height="64" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
<path fill="#f00" stroke="black" stroke-width="10" 
      d="M30,24c-9.89063,0 -18,8.10937 -18,18v96c0,9.89063 8.10937,18 18,18
      h18v29.20313l43.82813,-29.20313h58.17187 c9.89063,0 18,-8.10937 18,-18v-96
      c0,-9.89063 -8.10937,-18 -18,-18z"></path>
</svg>