@SVG <padrão> não será carregado quando gerado pelo Javascript [fechado]
Pergunta atualizada, baseada em um caso de teste mais simples:
Tenho um site usando um<svg>
gráfico gerado por um script. O material no gráfico é preenchido com padrões svg. Por enquanto, tudo bem
Agora adiciono um<pattern>
elemento, usando Javascript, para os padrões que já estão no gráfico. Eu posso fazer isso facilmente, usando métodos comocreateElementNS
, setAttribute
eappendChild
.
s elementos do padrão @SVG são assim:
<defs>
<pattern id="stripes" width="6" height="6" patternUnits="userSpaceOnUse">
<svg:path d="M 0 0 L 10 0 L 10 1 L 0 1 Z" fill="red" width="6" height="6" id="stripepimage"></svg:path>
</pattern>
</defs>
e eles são usados assim:
<path d="..." fill="url(#stripes)" />
Agora: usando Javascript ou o console do navegador, posso alterar um<path>
'sfill
para usar padrões diferentes. Isso funciona bem para todos os padrões que estavam na página desde o início, mas funcionanã para padrões adicionados posteriormente. O próprio código SVG está bom; salvá-lo em um arquivo .svg e abri-lo no mesmo navegador mostra o novo padrão na perfeiçã
Por que os padrões gerados dinamicamente não podem ser usados?