Multiple Instance of the same SVG Issue

  • Resolved millermultimedia

    (@millermultimedia)


    4 years, 4 months ago

    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)

    4 years, 4 months ago

    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.