Search code examples
csssvgfill

Using fill none instead of color for SVG

I am trying to create a svg image with 2 paths, where the outer shape is filled with a color, while the inside one is not. I am using React, and the code is the following:

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

This displays the entire shape filled, so the inner shape is not visible. However, if instead of fill="none" I have fill="#FFFFFF", this works, and I see the shape displayed. Any idea why and how I can fix it, without filling the inner shape with a color?

Solution

  • You will need to join the 2 d attributes in one and use 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>