#html #svg
#HTML #svg
Вопрос:
Я хотел бы раскрасить внутреннюю часть этого 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?
Ответ №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> Ответ №2:
Если вы предполагаете небольшие изменения изображения — это можно просто сделать, упростив исходный контур, удалив внутреннее отверстие для формирования подпути, используя черную обводку размером 10 пикселей и красную заливку удалив красный фон:
<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>