SVGInjector messes up id's inside defs

The index of the injected svg seems to be inserted after id’s, which is breaking url references

eg:

fill: url(#green)

image.svg:

<defs>
    <linearGradient id="green">
        ...
    </linearGradient>
</defs>

But when injected:

<defs>
    <linearGradient id="green-0">
        ...
    </linearGradient>
</defs>

[yiotaz]

I have the exact same issue. I have a radialGradient with an id where it is targeted throughout the svg file as a fill attribute with this id. How can I make this work?

[parashram]

For those in need, you need to modify the JS source of SVGInjector to exclude certain defs included by default. Check the var iriElementsAndProperties on line 284 of svg-injector.js.

Modify it by commenting out what you don’t want messed with, ensuring that your ID’s are unique across your project, as I’m sure you already do. For example:

var iriElementsAndProperties = {
    'clipPath': ['clip-path'],
    'color-profile': ['color-profile'],
    'cursor': ['cursor'],
    'filter': ['filter'],
    // 'linearGradient': ['fill', 'stroke'],
    'marker': ['marker', 'marker-start', 'marker-mid', 'marker-end'],
    'mask': ['mask'],
    'pattern': ['fill', 'stroke']
    // 'radialGradient': ['fill', 'stroke']
};

I had issue in SVG loading by svg-injector ver 1.1.3. So, followed this solution but now SVG’s colors aren’t displaying correctly. SVG Image don’t load on when injector override defs id=“a-1” color display correctly. and incorrect color displaying without injector override default id=“a” while image load properly. Can anyone suggest me the needful solution to avoid this issue?