angular/components

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

Open

#9.529 aberto em 23 de jan. de 2018

Ver no GitHub
 (4 comments) (4 reactions) (0 assignees)TypeScript (6.650 forks)batch import
P4area: material/iconhelp wanted

Métricas do repositório

Stars
 (24.044 stars)
Métricas de merge de PR
 (Mesclagem média 3d 12h) (98 fundiu PRs em 30d)

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

Guia do colaborador

Direção de pesquisa
Inspecione a função cloneSvg em icon registry.ts e modifique a para manipular IDs nos defs, evitando conflitos ao inline múltiplas cópias do mesmo SVG.
Pilha de tecnologia
typescript
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
GitAngular
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60