0

I've came across an interesting issue with SVG linearGradient when re-using the same inline SVG across multiple breakpoints. The use case here is that I want to use this single SVG on multiple breakpoints in different markup areas in the DOM. I have no control over being able to replace this inline SVG markup as it is supplied as a single field in a CMS and rendered in these 2 locations.

Reproduced on codepen here

  • There are 2 identical inline SVGs located under <div class="d-xs-block d-lg-none"> and <div class="d-none d-lg-block">
  • Within the preview window on desktop you will notice no linear gradient on the first letter. Once you slide the preview window down to mobile, the linear gradient appears on the first letter
  • The only (manual) way I've found to resolve this was to update one of the SVGs linearGradient id attribute to something unique like linear2, place that new id in the fill attribute of the .cls-header-2 css selector (fill: url(#linear2);), rename that selector to something unique like cls-header-2-desktop, then update the svg rectangle to <rect class="cls-header-2-desktop" ../> - so that the desktop SVG no longer references the mobile SVG css selector and linearGradient.
  • Another interesting point is that if you always show the first SVG, the problem goes away. It's not until the SVG's parent div is set to display: none that the 2nd SVG starts to act up. This doesn't seem like a direct issue with having 2 linearGradient's with the same ID because it works with the above case. It actually seems like the 2nd SVG (desktop) is referencing the linearGradient from the 1st SVG and can't fully access it when it's hidden, even though there's a 2nd linearGradient that can be found.
Ben Sewards
  • 2,571
  • 2
  • 25
  • 43
  • using the same ID means that only the last one will be considered like you described in the last paragraph – Temani Afif Feb 20 '20 at 19:30
  • 1
    related: https://stackoverflow.com/q/58385461/8620333 – Temani Afif Feb 20 '20 at 19:31
  • I do understand using the same ID means that only one is referenced - but notice how this isn't an issue if the mobile div isn't ever hidden? That's not normal style reference behavior to not apply/find a selector when that part of the DOM is hidden. – Ben Sewards Feb 20 '20 at 19:32
  • and when it's display:none it's not shown but still considered, that's why you see it only on mobile. It finds a gradient but its not displayed (it doesn't fail to find it) – Temani Afif Feb 20 '20 at 19:34
  • what I understand now is that since linearGradient is actual markup, it cannot be referenced from the url attribute when it is hidden in the DOM – Ben Sewards Feb 20 '20 at 19:35
  • @TemaniAfif that is definitely related and explains my scenario. I may end up using that best answer's 2nd option - which is to store all global linearGradient's in a invisible SVG that can be referenced from any SVG fill url. – Ben Sewards Feb 20 '20 at 19:45
  • 1
    I will then close the question as duplicate – Temani Afif Feb 20 '20 at 19:47

0 Answers0