JavaScript createElement y SVG

Quiero crear gráficos SVG en línea usando Javascript.JavaScript createElement y SVG

Sin embargo, parece que la función createElementNS aplica cierta normalización y transforma todas las etiquetas en minúsculas. Eso está bien para HTML pero no para XML/SVG. El NS que utilicé es http://www.w3.org/2000/svg.

En particular, tengo problemas para crear un elemento. Como se adjuntará como un no funcionará.

Hice algunas búsquedas pero no he podido encontrar una solución todavía.

¿Alguien sabe una solución?

¡Muchas gracias!

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

resultados en

<textpath></textpath>

Fuente

2010-08-16 pat

¿Cómo se puede averiguar esto sucede ¿Cómo se puede volcar el elemento creado en código XML nombres de etiquetas XML deben ser sensible: http://ejohn.org/blog/nodename-case-sensitivity/ –

espero, el siguiente ejemplo le ayudará a:

<head> 
    <style> 
     #svgContainer { 
      width: 400px; 
      height: 400px; 
      background-color: #a0a0a0; 
     } 
    </style> 
    <script> 
     function CreateSVG() { 
      var xmlns = "http://www.w3.org/2000/svg"; 
      var boxWidth = 300; 
      var boxHeight = 300; 

      var svgElem = document.createElementNS (xmlns, "svg"); 
      svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight); 
      svgElem.setAttributeNS (null, "width", boxWidth); 
      svgElem.setAttributeNS (null, "height", boxHeight); 
      svgElem.style.display = "block"; 

      var g = document.createElementNS (xmlns, "g"); 
      svgElem.appendChild (g); 
      g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)'); 

       // draw linear gradient 
      var defs = document.createElementNS (xmlns, "defs"); 
      var grad = document.createElementNS (xmlns, "linearGradient"); 
      grad.setAttributeNS (null, "id", "gradient"); 
      grad.setAttributeNS (null, "x1", "0%"); 
      grad.setAttributeNS (null, "x2", "0%"); 
      grad.setAttributeNS (null, "y1", "100%"); 
      grad.setAttributeNS (null, "y2", "0%"); 
      var stopTop = document.createElementNS (xmlns, "stop"); 
      stopTop.setAttributeNS (null, "offset", "0%"); 
      stopTop.setAttributeNS (null, "stop-color", "#ff0000"); 
      grad.appendChild (stopTop); 
      var stopBottom = document.createElementNS (xmlns, "stop"); 
      stopBottom.setAttributeNS (null, "offset", "100%"); 
      stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); 
      grad.appendChild (stopBottom); 
      defs.appendChild (grad); 
      g.appendChild (defs); 

       // draw borders 
      var coords = "M 0, 0"; 
      coords += " l 0, 300"; 
      coords += " l 300, 0"; 
      coords += " l 0, -300"; 
      coords += " l -300, 0"; 

      var path = document.createElementNS (xmlns, "path"); 
      path.setAttributeNS (null, 'stroke', "#000000"); 
      path.setAttributeNS (null, 'stroke-width', 10); 
      path.setAttributeNS (null, 'stroke-linejoin', "round"); 
      path.setAttributeNS (null, 'd', coords); 
      path.setAttributeNS (null, 'fill', "url(#gradient)"); 
      path.setAttributeNS (null, 'opacity', 1.0); 
      g.appendChild (path); 

      var svgContainer = document.getElementById ("svgContainer"); 
      svgContainer.appendChild (svgElem);   
     } 

    </script> 
</head> 
<body onload="CreateSVG()"> 
    <div id="svgContainer"></div> 
</body>

Fuente

2010-08-16 11:07:19 gumape

Gracias por su respuesta. En función de su respuesta y un ejemplo de svg de texto a camino: [http://pmast.de/svg/ textToPath.svg] (http://pmast.de/svg/textToPath.svg) Creé el siguiente documento: [http://pmast.de/svg/textToPath.html](http://pmast.de/ svg/textToPath.html) Aunque la fuente resultante parece idéntica y la creación de los elementos sigue su ejemplo, mi documento no funciona ... ¿Me falta algo? – pat

Su ejemplo me ayudó a comenzar a crear elementos SVG de JS. Todavía tenía que leer el documento de especificaciones de W3.org en Core DOM. Los espacios de nombres son bastante confusos. Gracias por los consejos. – CyberFonic

¿Funciona esto para las personas? Acabo de obtener una caja gris sin elementos SVG. (Firefox y Chrome por igual) – schlingel

-4

la respuesta dada es demasiado extensa y no es realmente útil para mí y me parece que es mucho molesto o simplemente decir falso. Si yo fuera usted, me gustaría simples tienen el elemento en HTML con la etiqueta decir:

<b id="myElement"></b>

y cuando tengo que crear elemento o añadir información Simplemente quisiera hacer:

document.getElementById('myElement').innerHTML = 'your stuff here';

espero que haya sido servicial.

Fuente

2011-05-19 17:43:58 Johnydep

Esta pregunta es sobre SVG, no HTML. – gilly3

@ gilly3 aunque tiene un punto: la respuesta aceptada consiste en construir un elemento SVG DOM básicamente desde cero que, si bien ordenado para hacer y técnicamente la respuesta más correcta, no es del todo práctico. Como la sintaxis SVG en un archivo SVG es en su mayoría idéntica a la sintaxis de definición SVG en el DOM (de la subcadena ' CCJ

Es un caso de uso bastante específico: tener toda la marca de dibujo SVG como una cadena, y anexarla como está a un elemento HTML. La pregunta es específicamente sobre agregar un elemento SVG a un dibujo existente. Ahora, hoy puede escribir el 'innerHTML' de un elemento SVG en algunos navegadores, pero [esa funcionalidad es nueva, y solo ha estado disponible desde comienzos de este año] (http://stackoverflow.com/questions/23275112#comment45705022_23279658) . La única forma de agregar un elemento a un dibujo existente en IE hoy, y en todos los navegadores en el momento en que se hizo esta pregunta, es a través de 'createElementNS()'. – gilly3

En primer lugar, use createElementNS, como lo está haciendo. createElement (sin NS) automáticamente minúsculas nombres de elementos dentro de documentos HTML, de acuerdo con el Mozilla documentation.

En segundo lugar, no confíe en la característica "Inspeccionar elemento" de Google Chrome aquí. Parece mostrar cada elemento en minúscula, sin importar el nombre de nodo real. Intente esto:

 
    > document.createElementNS("http://www.w3.org/2000/svg", "textPath").nodeName 
    "textPath" 
    > document.createElement("textPath").nodeName 
    "TEXTPATH"

Su problema podría ser un problema no relacionado. Por ejemplo, este código funciona bien en Firefox, pero se rompe en Chrome (12.0.742.112):

<html> 
    <head> 
     <script> 
     function animateSVG() { 
      var svgNS = "http://www.w3.org/2000/svg"; 
      var textElement = document.getElementById("TextElement"); 
      var amElement = document.createElementNS(svgNS, "animateMotion"); 
      console.log(textElement); 
      console.log(amElement); 
      console.log(amElement.nodeName); 
      amElement.setAttribute("path", "M 0 0 L 100 100"); 
      amElement.setAttribute("dur", "5s"); 
      amElement.setAttribute("fill", "freeze"); 
      textElement.appendChild(amElement); 
      //amElement.beginElement(); 
     }; 
     </script> 
    </head> 
    <body onload="animateSVG()"> 
    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <g transform="translate(100,100)"> 
     <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> 
      It's SVG! 
      <!-- <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze"/> --> 
     </text> 
     </g> 
    </svg> 
    </body> 
</html>

Mi problema probablemente tiene algo que ver con el manejo de animateMotion rota en Chrome (Issue 13585).

Su problema podría ser el mismo o podría tratarse de otro problema, pero asegúrese de no ser engañado por el inspector de elementos.

Fuente

2011-07-06 15:16:49 dlitz

tu comentario sobre los cromos inspecciona la característica del elemento salvado mi día, gracias – ZPiDER

Acabo de resolver un problema similar. document.createElement (y supongo que document.createElementNS), cuando se llama desde una página HTML crea un nodo HTML (donde el caso no importa), no un nodo xml.

Los siguientes obras en Chrome:

doc = document.implementation.createDocument (null, null, null); doc.createElementNS ("http: //www.w3.org/2000/SVG", 'textPath');.??

obtendrá el nodo de mayúsculas y minúsculas

Fuente

2012-10-17 03:24:24

Respuesta

Cuestiones relacionadas