angular / angular/components

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

Offen
#9,529 4 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/icon help wanted P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne in src/lib/icon/icon-registry.ts bei cloneSvg und untersuche, wie SVG-defs und ihre IDs kopiert werden. Reproduziere das Problem mit zwei eingebetteten Kopien, die einen linearGradient enthalten, und überprüfe anschließend, dass jede Kopie ihr Gradient ohne ID-Konflikte rendert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.