search

shakyShane / gulp-svg-sprites

Create SVG sprites or compile to <symbols>
MIT License
334 stars 45 forks source link

Duplicate IDs for masks, shapes, and paths #132

Open martinbethann opened 3 years ago

martinbethann commented 3 years ago

Hello,

We are seeing duplicate IDs generated for ids specifically used for masks, shapes, and paths. Any advice on how to correct this?

See id="a" in the example below:

<symbol id="payment-credit-card" viewBox="-4 -4 32 32">
            <defs><rect id="a" height="3" rx=".245" width="3"></rect><mask id="b" fill="#fff"><use fill-rule="evenodd" xlink:href="#a"></use></mask></defs><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"></path><g transform="translate(0 5.14)"><rect fill="#0066b2" height="15" rx="2" width="24" x=".019"></rect><g transform="translate(19.019 10.86)"><use fill="#d8d8d8" stroke="#d8d8d8" stroke-width=".5" xlink:href="#a"></use><g transform="translate(-.3 -.084)" fill="#d5b823" mask="url(#b)"><path d="M2.016.084h1.8v1h-1.8zM2.016 1.156h1.8v1h-1.8zM2.016 2.227h1.8v1h-1.8zM0 0h1.8v3.6H0z"></path></g></g><rect fill="#575757" height="2.875" rx=".5" width="24" y="1.922"></rect><text fill="#fff" font-family="SFProText-HeavyItalic, SF Pro Text" font-size="5" font-style="italic" font-weight="600"><tspan x="2.271" y="9.609">CREDIT</tspan></text></g></g>
        </symbol>