Quiero crear una línea con una punta de flecha. El elemento de línea está contenido en un contenedor de grupo en un SVG. Estoy usando el siguiente código para agregar la definición de punta de flecha al SVG.

 var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); var marker = document.createElementNS( "http://www.w3.org/2000/svg", "marker" ); marker.setAttributeNS(null, "id", "triangle"); marker.setAttributeNS(null, "refX", 10); marker.setAttributeNS(null, "refY", 5); marker.setAttributeNS(null, "markerUnits", 110); marker.setAttributeNS(null, "markerWidth", 100); marker.setAttributeNS(null, "markerHeight", 100); marker.setAttributeNS(null, "orient", "auto"); var path = document.createElementNS("http;//www.w3.org/2000/svg", "path"); path.setAttributeNS(null, "stroke", "black"); path.setAttributeNS(null, "d", "M 0 0 L 10 5 L 0 10 z"); marker.appendChild(path); defs.appendChild(marker); currentSVG.appendChild(defs);

Sin embargo, la punta de flecha no aparece. Aparece solo cuando abro las herramientas de desarrollo y edito la definición del marcador como SVG y lo cambio ligeramente para hacer un cambio. Sin editar en las herramientas de desarrollo, la definición de SVG y el final del marcador, aunque presentes, no muestran una punta de flecha.