Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como aplicar gradiente em path's num sprite de symbols svg?

Referente ao curso Performance Web I: otimizando o front-end, no capítulo Otimizações de Imagens e atividade SVGs otimizados

por JEAN
| 70.2k xp | 3 posts

Olá pessoal! Eu achei esse recurso de symbols espetacular!!!!! Fiquei entusiasmado por vários dias, criando svgs e inserindo tudo em symbol num único svg e chamando pela tag use. PORÉM... eis que surge uma logo com GRADIENTE! E empaquei... Não consigo de jeito nenhum fazer com que o gradiente funcione dentro de um symbol num svg externo, chamando pela use. Já tentei de várias maneiras, colocando o linearGradient no topo do file svg onde estão os symbols e referenciando por id, já tentei colocar o linearGradient agrupado com a path que necessita deste gradiente...enfim, nada funciona :( apenas cores sólidas. Alguém poderia me dar um help? Preciso muito fazer isso funcionar. Estou deixando as URLs para entenderem melhor o que estou quebrando a cabeça pra fazer funcionar caso não tenham entendido:

Logo American Express em SVG: http://www.somparacarro.com.br/logo-american-teste.svg

Página do HTML do Symbol: http://www.somparacarro.com.br/svg-american-teste.html

SVG do Symbol: http://www.somparacarro.com.br/svg-american-teste.svg

Desde já eu fico imensamente agradecido quem puder me ajudar neste problema que pelo jeito milhares de pessoas que se aventuraram nos symbols deve ter empacado.

Abraço! Jean Hilgert

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
3 respostas
por Sérgio Lopes
| 605.5k xp | 914 posts
Instrutor

Jean, excelente pergunta. Eu nunca tinha tentado fazer isso tbm. E estou tentando tbm sem sucesso.

Aparentemente existe problema com gradientes em <defs> quando usamos essa sintaxe de <use> com arquivo externo. Se fosse um SVG inlineado na pagina, por exemplo, parece que funciona (exemplo).

Outra coisa que consegui fazer funcionar (no Chrome pelo menos) é deixar o gradiente apenas inlineado na página (o symbol ainda no arquivo externo). Mas acho que isso tá longe do ideal.

Achei esse bug aqui do pessoal discutindo isso tbm e aparentemente com problemas: https://github.com/jkphl/svg-sprite/issues/74#issuecomment-94913539

por JEAN
| 70.2k xp | 3 posts

Sim, exatamente! É uma pena se não tiver solução. Aí terei que apelar pra gambiarra temporariamente rs... Se até os gringos estão com dificuldade então é pq o negócio é mais embaixo mesmo.... O gradiente inline funciona sim só que se não me engano ele aplica em todo o svg então se em algum local for outra cor ou gradiente, ele faz a aplicação ali também, certo? Se eu estiver enganado, podes me mostrar o gradiente inline com symbol externo?

solução!
por Sérgio Lopes
| 605.5k xp | 914 posts
Instrutor

Pesquisei mais um pouco Jean, e parece ser bug no Chrome e WebKit. Achei esse bug aberto há 5 anos no Chrome sem solução e esse demo do problema que é justo o que vc queria.

Se testar no Firefox, funciona de boa. Problema é Blink/WebKit mesmo.

Eu consegui fazer funcionar no Chrome adicionando o gradiente inline e referenciando o symbol externo mesmo:

<body style="background: gray;">

<svg xmlns="http://www.w3.org/2000/svg">
   <defs>
    <linearGradient id="a" x1="7144.39" x2="3586.95" y1="6183.55" y2="-245.58" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#007AA9"/>
      <stop offset="1" stop-color="#00C0ED"/>
    </linearGradient>
  </defs>
</svg>

<svg>
    <use xlink:href="svg-american-teste.svg#logo-american" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

</body>

Mas isso tá errado, quebra o Firefox (que faz a coisa certa por padrão).

O único jeito parece ser deixar tudo inline como na minha mensagem anterior. Mas claro nem sempre é possível e perde-se a vantagem do SVG externo.

No caso específico desse ícone que o gradiente é relativamente simples e aplicado no fundo quadrado inteiro, dá pra fazer uma gambiarra e defini-lo com CSS na hora de importar o symbol. (mas é um hack e não daria certo em outras situações mais complexas)

<svg style="background: linear-gradient(to bottom, #007AA9, #00C0ED)">
    <use xlink:href="svg-american-teste.svg#logo-american" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>