我想将此 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 的“内部”部分？
最佳答案
如果没有附加元素，这是不可能的，因为您的黑色轮廓已经是一条充满黑色的路径(路径的某些部分朝相反方向移动，创建“切口”)。
您可以使用该“切口”(省略路径的外部点)作为填充红色的新路径，但这会产生白色闪烁，具体取决于显示它的浏览器/应用程序以及它所显示的大小/分辨率.因此，您还必须稍微挤出红色区域并将其放在轮廓后面(即 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>关于html - 填充 SVG 的内部区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55550637/