Multiple Instance of the same SVG Issue

  • Hello,

    Love the plugin. I have run into an issue when displaying the same inline SVG image multiple times on a page when the SVG includes a Clip Path. I am using the SVG image as a link and using CSS to modify the coloring of the SVG on rollover. The SVG’s clip path is defined using an ID which is included in the SVG. The issue I am having is that some browsers (in this case Firefox) do not like having the same ID used multiple times on a page so the rollover effect only works on the first image.In my research I have found this is a known issue and that one solution is to changes all ID’s when an image is converted to being inline so that they include a random variable upon insert. There is an open source program that does just this call svg-inject. I would like to suggest this as a future feature. For now I have had to copy the image and modify the code to include unique ID’s for each instance on the page.

    Thanks for your time!

Viewing 1 replies (of 1 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    Thanks for your support and the suggestion.

    Couldn’t you use a class instead of ID for this?

    ID preservation is pretty important for people who use it just once. But if you’re using it multiple times, I’d just switch to a class instead.

    There’s also automatic iterating classes you can use like IDs (since they’re unique per replacement on each page) on the inline SVG.

    Unless I’m missing something ?? let me know.

    I hope this helps.

Viewing 1 replies (of 1 total)
  • The topic ‘Multiple Instance of the same SVG Issue’ is closed to new replies.