@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?

questionAnswers(2)

yourAnswerToTheQuestion