mat-icon has display issues when inlining multiple copies of the same SVG with defs with IDs
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### Bug, feature request, or proposal:
Proposal: Extend the cloneSvg function in src/lib/icon/icon-registry.ts to accommodate munging IDs in defs so that multiple copies of the same inlined SVG won't have conflicting IDs.
#### What is the expected behavior?
When two copies of an SVG with a linearGradient def (identified by an ID) are inlined, both copies of the SVG should display the linear gradient.
#### What is the current behavior?
Only the first copy of the SVG displays the linear gradient. All other copies do not, because the IDs in the defs are duplicated in the other copies.
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 5.1.2, Angular Material 5.0.2 (although the issue still exists in 5.1.0), TypeScript 2.6.2. Tested in Win10 in Chrome Version 63.0.3239.132 (Official Build) (64-bit).
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez dans src/lib/icon/icon-registry.ts, au niveau de cloneSvg, et examinez comment les defs SVG et leurs IDs sont copiés. Reproduisez le problème avec deux copies intégrées contenant un linearGradient, puis vérifiez que chaque copie restitue son dégradé sans conflits d'ID.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 45/100