vue-leaflet/Vue2Leaflet

SVG icons with IDs do not work

Open

#514 opened on Jan 23, 2020

View on GitHub
 (5 comments) (0 reactions) (1 assignee)JavaScript (1,942 stars) (380 forks)batch import
bugconfirmedhelp wanted

Description

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: https://github.com/vue-leaflet/Vue2Leaflet/issues/508#issuecomment-570235452.

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

Contributor guide

Tech stack
javascriptvue
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue basicsLeaflet basicsSVG knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate why SVG gradients with IDs break when placed inside the Leaflet map in Vue2Leaflet. Check if Leaflet's internal rendering isolates SVG elements or if the issue is due to duplicate IDs in the DOM. The reporter mentions a related issue (#508) that may provide clues. Look at the L.icon component's implementation and how it handles SVG content. Consider if a fix involves ensuring unique SVG IDs or using a different approach to reference gradients.