填充svg的内部部分
填充svg的内部部分
提问于 2018-12-10 13:00:50
这是一个包含X的圆的svg：
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>
我想改变周围地区的颜色X(不是X或圆圈的边界)。有办法这样做吗？我正在寻找的解决方案应该与任何类型的svg一起工作，这些svg包含一个包含其中某些内容的大纲。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-10 15:59:48
给你：
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="pink" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z"/>
<path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>
Stack Overflow用户
发布于 2018-12-10 16:31:21
如果你仔细看一下第二个路径定义，你就可以看到它里面的z --一个“封闭序列”符号。这意味着在单个path元素中实际上有2条路径。如果你把它们分开，就会有轮廓部分和"x“部分分开。
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path id="content" d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8z" />
<path id="outline" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>现在请注意，轮廓也是由两个路径构建的--外部和内部。处理这个问题有几种不同的方法。
1)对其进行分割，排序外-内-内容，填充外-笔画颜色，填充内-内-颜色.缺点是图像不再透明--内部画在黑色外层的顶部。
2)保留大纲，重复内部部分，添加任何你喜欢的内容，将内容放在两个元素之后。将更多字节添加到图像中。
3)用非零宽度的单笔画路径完全代替轮廓轨迹。这是最好的方式，但并非总是可能的，因为轮廓形状可以不仅仅是一条线。但对于最简单的情况(如你的)，效果很好。
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path id="content" d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8z" />
<circle cx="12" cy="12" r="10" stroke-width="2" fill="none" stroke="black" />
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53706237
复制相关文章
相似问题
腾讯云开发者
