SVG <patrón> no se cargará cuando sea generado por Javascript [cerrado]

Pregunta actualizada, basada en un caso de prueba más simple:

Tengo un sitio web usando un<svg> gráfico generado por un script. Las cosas en el gráfico están llenas de patrones svg. Hasta aquí todo bien

Ahora agrego una<pattern> element, usando Javascript, a los patrones que ya están en el gráfico. Puedo hacerlo fácilmente, utilizando métodos comocreateElementNS, setAttribute yappendChild.

os elementos del patrón @SVG se ven así:

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

y se usan así:

<path d="..." fill="url(#stripes)" />

Ahora: usando Javascript, o la consola del navegador, puedo cambiar un<path> 'sfill atributo para usar diferentes patrones. Eso funciona bien para todos los patrones que estaban en la página desde el principio, pero funcionan para patrones agregados más adelante. El código SVG en sí está bien; guardarlo en un archivo .svg y abrirlo en el mismo navegador muestra el nuevo patrón sin problemas.

¿Por qué no se pueden usar patrones generados dinámicamente?

Respuestas a la pregunta(2)

Su respuesta a la pregunta