Geek Answers Handbook

ClipPath in multiple SVG tags

Suppose you have several SVG tags, in each of which you define a different click path with the same identifier.

<svg id="svg1" width="200" height="200"> <defs> <clipPath id="nodeclipper"> <rect width="100" height="100" x="0" y="0" /> </clipPath> </defs> </svg> <svg id="svg2" width="200" height="200"> <defs> <clipPath id="nodeclipper"> <circle cx="20" cy="0" r="40" /> </clipPath> </defs> </svg>

I also made JSFiddle . What is the expected behavior? I thought that an element can only refer to definitions inside its own SVG tag, but that doesn't seem to be the case:

  • Chrome 26: Uses the circle clip path two times.
  • Firefox 17: Uses the rect path of the clip twice.
  • Safari 6: Displays one rect and one circle clip path, as expected.

It is strange when to hide one of the SVG tags , because Chrome and Safari then completely reject clip-path .

I know this works when clipPath have different identifiers, but should it be like that? As far as I understand, spec does not contain information about the problem.

+6
source share
1 answer

What you are doing is wrong for http://www.w3.org/TR/SVG/struct.html#IDAttribute , these are links http://www.w3.org/TR/2008/REC-xml-20081126/ that directly addresses this issue ...

Type identifier values ​​MUST match the Name job. The name MUST NOT appear more than once in an XML document as a value of this type; that is, the ID values ​​MUST uniquely identify the elements that carry them.

+4
source

More articles:


All Articles