angular/components

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

Open

#9529 aperta il 23 gen 2018

Vedi su GitHub
 (4 commenti) (4 reazioni) (0 assegnatari)TypeScript (6650 fork)batch import
P4area: material/iconhelp wanted

Metriche repository

Star
 (24.044 star)
Metriche merge PR
 (Merge medio 3g 12h) (98 PR mergiate in 30 g)

Descrizione

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).

Guida contributor

Direzione di ricerca
Esamina la funzione cloneSvg in icon registry.ts e modificala per gestire gli ID nei defs, evitando conflitti quando si inlining più copie della stessa SVG.
Tech stack
typescript
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Mezza giornata
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
GitAngular
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
60