CODEWITHSUNDEEP
svgcross-browser
user490524
user490524

Reputation:

clipPath in multiple SVG tags

Suppose you have multiple SVG tags where in each you define a different clip path with the same ID.

<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 a JSFiddle. What is the expected behaviour? I thought that an element could only reference definitions inside its own SVG tag, but that doesn't seem to be the case:

It gets weird when you hide one of the SVG tags because Chrome and Safari then drop the clip-path entirely.

I know it works when the clipPaths have different IDs but is it supposed to be that way? As far as I see the spec doesn't contain information about the issue.

Upvotes: 14

Views: 3230

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

What you are doing is invalid per http://www.w3.org/TR/SVG/struct.html#IDAttribute this references http://www.w3.org/TR/2008/REC-xml-20081126/ which addresses this specific issue directly...

Values of type ID MUST match the Name production. A name MUST NOT appear more than once in an XML document as a value of this type; i.e., ID values MUST uniquely identify the elements which bear them.

Upvotes: 9

Related Questions