angular/components

mat-icon has display issues when inlining multiple copies of the same SVG with defs with IDs

Open

#9 529 ouverte le 23 janv. 2018

Voir sur GitHub
 (4 commentaires) (4 réactions) (0 assignés)TypeScript (6 650 forks)batch import
P4area: material/iconhelp wanted

Métriques du dépôt

Stars
 (24 044 stars)
Métriques de merge PR
 (Merge moyen 3j 12h) (98 PRs mergées en 30 j)

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 contributeur

Direction de recherche
Inspectez la fonction cloneSvg dans icon registry.ts et modifiez la pour traiter les IDs dans les defs, afin d'éviter les conflits lors de l'incorporation de plusieurs copies du même SVG.
Stack technique
typescript
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
Une demi journée
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
GitAngular
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60