SVG icons with IDs do not work

[macieklamberski]

Description

I'm using SVG icons inside <l-icon>. I have linear <linearGradient> with id="a" and I'm referencing this gradient to fill a circle. When I put the icon outside the map, gradient is nicely filling the circle. When I use same icon inside the map, gradient stops working.

The strange thing is that when I put the same icon inside the map and BEFORE the map, gradient appears in both icons. When I move icon AFTER the map, both icons do not have the gradient.

Looks to me as if this gradient with id="a" was not visible for SVG icon if its first occurence in DOM is inside the map.

I think it's related to this issue: #508 (comment).

Live Demo

https://codesandbox.io/s/hungry-bell-y2w1b

Steps to Reproduce

1. Initially you see both icons have gradient.
2. Remove <icon /> component from above the map to see that icon inside map does not have gradient.
3. Put icon below the map to have the same result.

Expected Results

SVG icon inside the map should have linear gradient.

Actual Results

SVG icon only have gradient if there's the same icon before the map in DOM.

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Vue: v2.6.11
• Vue2Leaflet: v2.4.2

[DonNicoJs]

@lamberski Thanks for the repro demo, this issue is similar to #508 I'll be investigating this, but is not a high priority at the moment.

Pull requests welcomed :)

[mikeu]

I've investigated this issue a little bit, and I have an idea of what is happening.

When the SVG circle uses fill=url(#a), the browser identifies the first node on the page with an id of a, and uses that for the fill.

When the <icon/> component is added before the map, that copy contains the first element with id="a" on the page, so when the <icon/> component is used again in the <l-icon> on the map, everything works as expected and the gradient fill appears on the map.

However, when the <icon/> isn't included separately before the map (i.e. during normal operation), the first instance on the page is the one inside the display: none div returned by the render function of the LMarker that contains the icon. This means that the first node with id="a" that the browser finds has inherited display: none, and so does not appear at all.

@DonNicoJs I've found that replacing the display: none style in the LMarker render function with styles that keep it visually hidden but still part of the browser "display" seems to resolve this particular issue. But I'm not certain that it wouldn't introduce other side effects to the library. Can you take a look at the changes, and see whether you think they'd cause issues anywhere else?

There's also the question of whether or not we'd update all of the other places that display: none is used throughout the various components. Looks as if it would affect at least LCircle, LCircleMarker, LFeatureGroup, LLayerGroup, LPolygon, LPolyline, and LRectangle. If you think this is a worthwhile approach, I can update my branch to add it to all the relevant places and open a PR. But if this is too big a change to the Vue2Leaflet internals, that'd make sense to me too at this point, with the Vue3 version just around the corner to focus on.

---

In the meantime, I don't know if you're still interested in a solution to this after all these months @lamberski , but a work-around with the existing library is to define and include the gradient as a separate component from the icon definition: https://codesandbox.io/s/focused-ptolemy-xck5b?file=/src/components/Map.vue

[DonNicoJs]

@mikeu I think your approach works! we just need to verify that we do not take a performance hit ( but I think is not the case )
Do you have time to finish the PR? Also we should bring this knowledge to the v3 version too.

[mikeu]

@DonNicoJs yep, I can take care of that at some point soon! What are your thoughts on whether I should expand it to include other components that currently use display: none?

[DonNicoJs]

@mikeu let's try to expand and see if the performance is the same!