Search code examples
svg

SVG fill-rule="evenodd" doesn't work (rendering hole in SVG)

I have this code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="200 0 270 80">
    <path d="M 230 10 L 220 20 L 220 60 L 230 70 L 250 70 L 260 60 L 260 20 L 250 10 L 230 10" fill="#FF5500"/>
    <path d="M 235 20 L 230 25 L 230 55 L 235 60 L 245 60 L 250 55 L 250 25 L 245 20 L 235 20" fill-rule="evenodd"/>
</svg>

I want second path the fill a hole to first path. The hole needs to be transparent, not black.

Solution

  • As Robert told, fill-rule property has effect only on the given path, it does not affect its surroundings. To make it work there have to be "outer" and "inner" path segments in the path data:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="200 0 270 80">
    <path d="M 230 10 L 220 20 L 220 60 L 230 70 L 250 70 L 260 60 L 260 20 L 250 10 L 230 10
             M 235 20 L 230 25 L 230 55 L 235 60 L 245 60 L 250 55 L 250 25 L 245 20 L 235 20"
    fill="#FF5500"
    fill-rule="evenodd" />
</svg>