使用 fill none 而不是 SVG 的颜色

Question

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

<SvgIcon
className={className}
nativeColor={theme.palette[color] ? theme.palette[color].main : color}
style={{
  height: `${size}px`,
  width: `${size}px`,
}}
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="none"，而是 fill="#FFFFFF"，这会起作用，并且我会看到显示的形状。知道为什么以及如何修复它，而不用颜色填充内部形状吗？

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

使用 fill none 而不是 SVG 的颜色

Using fill none instead of color for SVG

css

svg

fill