svg clip-path circle fails when using svg-sprite and multiple instances

Question

I have this head-scratcher that I've been beating for the past few weeks. Hard to determine where the issue is originating, because it has specific conditions which create it.

Here is a plnkr demo:

https://plnkr.co/edit/YrBGTBSohmbnZbQ8m2Yo?p=preview (see the bug in Firefox and IE Edge; there are cases where Chrome fails too, but wasn't able to reproduce that in plnkr).

Conditions:

icon rendered as svg-sprite using <defs> mode (the sprite must be in defs mode to work with angular-material's md-icon element).
svg icon is using clip-path circle.
clip-path circle fails when the icon is rendered more than once on the page, but only when one instance is hidden/removed from DOM. In Firefox (and rarely in Chrome too), the icon will be rendered as a square instead. In IE Edge, the icon appears transparent.

My guess is there might be an issue with the id references at a browser level.

You've more than one element on the page with the same id. Your file is therefore invalid. If you do invalid things you get your fingers burnt. There's no Firefox or IE bug here. — Robert Longson
@RobertLongson, so you're saying when the <md-icon> element is rendered, if you look inside, there is an <svg id="..."> element, right? And this id matches the other instances where this icon is used, causing the conflict, correct? I knew it was something like that, just didn't know where the id conflict was happening. Thanks for pointing it out. — ngDeveloper
Right, the document has more than one element with id="bSVGID_1_" in it, amongst others. — Robert Longson
If they were unique the DOM wouldn't contain more than one of them ;-) — Robert Longson
Invalid things may or may not work as you want them to. Sometimes you'll get lucky. — Robert Longson

ngDeveloper ngDeveloper · Accepted Answer · 2016-03-08T00:30:51

We managed to resolve the issue by rebuilding our svg's without using any id="..." attributes. This meant we had to remove <clipPath id="..."> and build the svg's without them.

Example Canada flag svg that now works in all browsers (as part of an svg sprite):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <circle style="fill:#FFFFFF;" cx="25" cy="25" r="25"/>
    <path style="fill:#BF0A30;" d="M13.1,26.2l-1.4,0.5l6.4,5.6c0.5,1.4-0.2,1.9-0.6,2.6l6.9-0.9l-0.2,7h1.4l-0.1-7l6.9,0.8
        C32,33.9,31.6,33.4,32,32l6.4-5.3l-1.1-0.4c-0.9-0.7,0.4-3.4,0.6-5.1c0,0-3.7,1.3-4,0.6l-1-1.8l-3.4,3.7c-0.4,0.1-0.5-0.1-0.6-0.4
        l1.6-7.8L28,16.9c-0.2,0.1-0.4,0-0.6-0.2L25,11.9l-2.5,5c-0.2,0.2-0.4,0.2-0.5,0.1l-2.4-1.3l1.4,7.7c-0.1,0.3-0.4,0.4-0.7,0.2
        l-3.2-3.7c-0.4,0.7-0.7,1.8-1.3,2c-0.6,0.2-2.4-0.5-3.7-0.7C12.7,22.7,14,25.3,13.1,26.2L13.1,26.2z"/>
    <path style="fill:#BF0A30;" d="M7.8,6.9C3,11.5,0,17.8,0,24.9s3,13.6,7.9,18.2V6.9z"/>
    <path style="fill:#BF0A30;" d="M42.1,43.1c4.8-4.6,7.9-10.9,7.9-18c0-7.2-3-13.6-7.9-18.2L42.1,43.1z"/>
    <path style="fill:#686868;" d="M25,0.1c13.7,0,24.9,11.2,24.9,24.9S38.7,49.9,25,49.9S0.1,38.7,0.1,25S11.3,0.1,25,0.1 M25,0
        C11.2,0,0,11.2,0,25s11.2,25,25,25s25-11.2,25-25S38.8,0,25,0L25,0z"/>
</svg>

svg clip-path circle fails when using svg-sprite and multiple instances

1 Answers