Question

这是一个圆形的svg，里面有一个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 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类型。

Answer 1

您在这里：

<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>

Answer 2

如果仔细查看第二条路径定义，则可以在其中找到jq -r 'map("\(.min)-\(.max)") | join(",")' file.json-一个“关闭序列”符号。这意味着单个z元素中实际上包含2条路径。如果将它们分开-将会分别有轮廓和“ x”部分。

path

现在请注意，轮廓线也从外部和内部两个路径构建。有几种不同的处理方法。

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" />
  <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>

填充svg的内部

2 个答案: