assigning group to clipPath attr produces invalid markup

[mcmoyes]

If we change the line here: http://svg.dabbles.info/snaptut-masks2

g.attr({ mask: clipG });

to

g.attr({ clipPath: clipG });

Nothing displays. This is because multiple shape elements are permitted content for clipPath, but structural elements are not (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath). The above line copies the g tag into the clip-path element. It should produce something like:

<clipPath id="clipPathSj8unza1c1w">
   <circle cx="100" cy="100" r="75" stroke="#c0c0c0" fill="#c0c0c0" style="stroke-width: 40;"></circle>
   <circle cx="250" cy="250" r="75" stroke="#c0c0c0" fill="#c0c0c0" style="stroke-width: 40;"></circle>
</clipPath>

instead of:

<clipPath id="clipPathSj8unza1c1w">
   <g>
      <circle cx="100" cy="100" r="75" stroke="#c0c0c0" fill="#c0c0c0" style="stroke-width: 40;"></circle>
      <circle cx="250" cy="250" r="75" stroke="#c0c0c0" fill="#c0c0c0" style="stroke-width: 40;"></circle>
   </g>
</clipPath>

...unless there's a way to group multiple elements without a group, but I couldn't find it.

[ibrierley]

Hmm feels a bit odd, if I'm understanding it correct....it feels like saying giving it the wrong input produces the wrong output (which I'm not sure if that's a problem).

It could do this, but the problem is that the clip path element is wrong in the first place to contain incorrect elements ? Eg what if the g element had a transform on it. Should the inner elements be transformed ? What if it's an svg element or something. I'm not sure there's a good solution to this (other than one which may work for a few simple cases)?

[mcmoyes]

True, I see what you mean. If clipPath in .attr() could also accept an array of els... is that a cleaner solution? It's kind of a weird exception, and you're right, there may be no ideal solution.