niño ruta dentro de SVG uso de JavaScript

Question

buen día,

Tengo dificultades increíbles en la creación de un camino y mostrar que el uso de "appendChild" dentro de un elemento SVG.

Tengo que estar perdiendo algo críticamente simple ya que he echado sobre las especificaciones de W3C, w3schools.com, varias publicaciones aquí y tratando de hacer ninja google de varias maneras.

Estoy probando en Firefox y Chrome.

Tengo un archivo SVG sencilla así:

<svg xmlns:svg ... id="fullPageID"> 
<image id="timer1" x="100" y="100" width="100px" height="100px" xlink:href="../component/timer/timer1.svg" /> 
<image id="battery1" x="200" y="200" width="100px" height="100px" xlink:href="../component/battery/30x20_ochre.svg" /> 
<script xlink:href="pathMaker.js" type="text/javascript" id="pathMaker" /> 
</svg> 

El guión que estoy tratando de utilizar el siguiente aspecto:

newpath = document.createElementNS("SVG","path"); 
newpath.setAttribute("id", "pathIdD"); 
newpath.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041"); 
newpath.setAttribute("stroke", "black"); 
newpath.setAttribute("stroke-width", 3); 
newpath.setAttribute("opacity", 1); 
newpath.setAttribute("fill", "none"); 

document.getElementById("fullPageID").appendChild(newpath); 

sólo quiero hacer que algo funcione sencilla. ¿Me equivoco al pensar que no necesito una solución tan complicada como la que se encuentra en Library to generate SVG Path with Javascript??

Gracias Amables.

Answer 1

El espacio de nombre debe ser "http://www.w3.org/2000/svg", no "SVG" en la llamada createElementNS.

Answer 2

Hay dos cuestiones:

1. Como ya se ha señalado, hay que utilizar el URI de espacio de nombres completo, por lo que en este caso:

   newpath = document.createElementNS('http://www.w3.org/2000/svg',"path"); 
   

2. Los atributos también se deben establecer con espacio de nombres en mente. La buena noticia es que se puede pasar en null como el URI de espacio de nombres, por lo que:

   newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041"); 
   

nuevo, aquí hay dos maneras de hacer frente al espacio de nombres SVG fácil (suponiendo que se trata de un SVG independiente, no incrustado en HTML):

• Para hacer referencia al elemento svg, en lugar de darle una ID, puede usar document.rootElement.
• document.rootElement.getAttribute(null, "xmlns") devuelve una cadena vacía (mientras que la solicitud de otros atributos funciona con este método. En su lugar, utilice document.rootElement.namespaceURI.

Así que en su código, puede hacer las siguientes reescrituras:

Desde:

newpath = document.createElementNS("http://www.w3.org/2000/svg","path"); 

Para:

newpath = document.createElementNS(document.rootElement.namespaceURI,"path"); 

Y para anexar el elemento, se puede pasar de :

document.getElementById("fullPageID").appendChild(newpath); 

a:

document.rootElement.appendChild(newpath); 

Así que el guión final sería:

newpath = document.createElementNS(document.rootElement.namespaceURI,"path"); 
newpath.setAttributeNS(null, "id", "pathIdD"); 
newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041"); 
newpath.setAttributeNS(null, "stroke", "black"); 
newpath.setAttributeNS(null, "stroke-width", 3); 
newpath.setAttributeNS(null, "opacity", 1); 
newpath.setAttributeNS(null, "fill", "none"); 

document.rootElement.appendChild(newpath);