对 SVG 使用无填充而不是颜色

Posted 2023-03-28

【中文标题】对 SVG 使用无填充而不是颜色

【英文标题】：Using fill none instead of color for SVG

【发布时间】：2020-12-12 22:05:03

【问题描述】：

我正在尝试创建具有 2 条路径的 svg 图像，其中外部形状填充有颜色，而内部则没有。我正在使用 React，代码如下：

<SvgIcon
className=className
nativeColor=theme.palette[color] ? theme.palette[color].main : color
style=
  height: `$sizepx`,
  width: `$sizepx`,

viewBox="0 0 32 32">
<g fillRule="evenodd">
  <path
    d="M16,0 C9.372583,0 4,5.0144108 4,11.2 C4,19.6 16,32 16,32 C16,32 28,19.6 28,11.2 C28,5.0144108 22.627417,0 16,0 Z"
    fill=color
    fillOpacity="1"
    fillRule="nonzero"
    stroke="none"
  />
  <path
    d="M15.5,4 L6,9.18181818 L15.5,14.3636364 L23.2727273,10.1231818 L23.2727273,16.0909091 L25,16.0909091 L25,9.18181818 M9.45454545,12.7918182 L9.45454545,16.2463636 L15.5,19.5454545 L21.5454545,16.2463636 L21.5454545,12.7918182 L15.5,16.0909091 L9.45454545,12.7918182 Z"
    fill="none"
  />
</g>

这会显示填充的整个形状，因此内部形状不可见。但是，如果我有 fill="#FFFFFF" 而不是 fill="none"，则此方法有效，并且我看到显示的形状。知道为什么以及如何修复它，而无需用颜色填充内部形状吗？

【问题讨论】：

至于为什么：因为填充类型为 none 只会显示底层内容。至于如何解决它：使用面具。

【参考方案1】：

您需要将二维属性合二为一并使用fill-Rule="evenodd"

<svg
style="height: 100px"
viewBox="0 0 32 32">

  <path
    d="M16,0 C9.372583,0 4,5.0144108 4,11.2 C4,19.6 16,32 16,32 C16,32 28,19.6 28,11.2 C28,5.0144108 22.627417,0 16,0 Z 
    
       M15.5,4 L6,9.18181818 L15.5,14.3636364 L23.2727273,10.1231818 L23.2727273,16.0909091 L25,16.0909091 L25,9.18181818
       
       M9.45454545,12.7918182 L9.45454545,16.2463636 L15.5,19.5454545 L21.5454545,16.2463636 L21.5454545,12.7918182 L15.5,16.0909091 L9.45454545,12.7918182 Z"
    fill="red"
    stroke="none"
    fill-rule="evenodd"
  />

</svg>

【讨论】：

两种解决方案（屏蔽和加入 d 属性）都有效。我正在接受@enxaneta 的解决方案，因为对于这种情况，掩码似乎有点矫枉过正。