12

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.

mikepurvis
  • 1,568
  • 2
  • 19
  • 28
  • Good question. I am 70% sure that you cannot do what you want, but that's not enough for me to state it categorically. I seem to recall discussion about this on the SVG mailing list, though, as it applies to other areas, too (like `` elements); if I can't find it there, perhaps you can. Alternatively, you could write a robust `cloneSVG()` function that performs the clone, and makes IDs unique by appending a user-specified variable and has knowledge of all SVG attributes that may reference an ID and update those attributes as well. – Phrogz Mar 11 '11 at 17:49

1 Answers1

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • 1
    _"Alternatively, is there a better way to define an arc like this **outside of using paths**?"_ – Phrogz Mar 12 '11 at 17:27