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

您需要将2d属性合并为一个并使用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>

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

1 个答案: