Changing ids of gradients in defs

[amykapernick]

I've been having issues where it's changing the ID of my gradient and therefore breaking the reference to the style, and because the appending number is a global variable, it changes each time I load a page.

It's possible to stop incrementing the ids by removing linearGradient: ['fill', 'stroke'], from src/inject-element.js in the svg-injector module, but can you set it so that each of these items in the iriElementsAndProperties object can be turned on and off in a config? If we're writing our code properly, we shouldn't get duplicate ids anyway

[tanem]

Hey @amykapernick. IIRC that ID re-generation in SVGInjector was done so that multiple instances of the same SVG could be injected safely on the page.

Think I get what your particular issue might be, but can you please try isolating & recreating it so I can get a better handle on what's going on? You could try forking the basic CodeSandbox example?

[amykapernick]

@tanem the issue is that it keeps changing the number at the end of the id depending on the page it's on (https://5b2bc282b13fb1249c8fbb0b--aimhigher-dev.netlify.com/ the svg is in the header under HeroBack) because the appending number is a global variable.

I want the id to remain whatever I set it, because I want to be able to apply the background in my CSS, not have it inline on the SVG

[tanem]

Thanks for the example. Looks like this issue huh iconic/SVGInjector#29. I'll post back once I've had a chance to think about things a bit more 🤔

[tanem]

@amykapernick just set up #89 which will allow us to turn off the renumeration of all IRI addressable elements. Think this should address your use-case? I'm planning on shipping this tomorrow sometime anyway.

[tanem]

Just published 4.1.0, hopefully that helps. Will leave this issue open for a while in case you want to provide any feedback 👂

[tanem]

Closing as no response, but feel free to ping me if anything crops up.

[parashram]

Need solution for issue : iconic/SVGInjector#29 (comment)

[tanem]

Need solution for issue : iconic/SVGInjector#29 (comment)

Have you tried setting renumerateIRIElements to false?

A permanent solution is a bit more involved, have had it on my backlog for a while 😅

[parashram]

By Adding renumerateIRIElements='false'; SVG image is calling by source url, not by injector. Below is code how I have applied this property. Also let me know if i am applying it on wrong place.

var injectElement = function (el, evalScripts, pngFallback, callback) {

      // Grab the src or data-src attribute
      var imgUrl = el.getAttribute('data-src') || el.getAttribute('src');
      renumerateIRIElements='false';

      // We can only inject SVG
      if (!(/\.svg/i).test(imgUrl)) {
        callback('Attempted to inject a file with a non-svg extension: ' + imgUrl);
        return;
      }

[tanem]

Some q's/suggestions:

• Are you using this library (react-svg), or the svg-injector library?
• Both of those libraries have "API Usage" live examples in the README which show how to use the API, please see here and here.