Can I apply clipping in SVG without specifying a clip-path ID?

Question

In my markup, I have a chunk like this:

<svg width="0" height="0" style="display:none" id="dummy-wedge">
 <g class="dummy" transform="translate(100, 100)">
    <defs>
      <clipPath id="clip1">
        <polygon id="clip1Shape" points="-100,-100 0,-100 0,0 -100,-20" />        
      </clipPath>
    </defs>
    <circle id="" cx="0" cy="0" r="52" fill-opacity="0" 
                  stroke="#ffffff" stroke-opacity="0.6" stroke-width="50" 
                  pointer-events="visiblePainted" clip-path="url(#clip1)" />
  </g>
</svg>

What I'm wanting to do is grab that chunk and clone it into a different svg root element to create a bunch of wedges, each with a different position and clip segment. That part is cool, but the frustration is that each cloned clipPath element will need to receive a new ID which will then have to be inserted into the clip-path attribute of the matching element.

I know that if all the arcs were the same length, I could have a common clip and use rotate transforms, but they aren't necessarily the same length.

Is it possible to declare a clip polygon using a topological relationship rather than by explicitly naming it? Alternatively, is there a better way to define an arc like this outside of using paths?

Thanks.

Answer 1

Why do you need to use clipping? Couldn't you just use path elements with the various arc segments in them?

There's no declarative way (yet) to get the behaviour you are after, but this is what the SVG Parameters specification is meant to address. Look at the examples there and the script implementation provided for processing the content (as a way to support the current browsers). NOTE: it's still a working draft, and is subject to change.