1

I have this svg:

<circle cx="50" cy="100" r="50"  stroke-width="0" fill="orange"/>
<polygon points="0,100, 50,50 100,100" fill="white"/>

The background is transparent. The polygon overwrites the circle with white color, but I want this area to be transparent (instead of white). How can I do this?

balping
  • 7,518
  • 3
  • 21
  • 35

1 Answers1

3

You can use fill-rule: evenodd property with path:s to "cut holes" to your shapes:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path fill="orange"
      fill-rule="evenodd"
      d="M50 50 L100 100 L0 100
         A50 50 0 0 1 100 100
         A50 50 0 0 1 0 100 z"/>
</svg>
makes
  • 6,438
  • 3
  • 40
  • 58
  • Also see: http://stackoverflow.com/questions/1983256/how-can-i-cut-one-shape-from-another – makes Apr 07 '12 at 21:21