whatwg - svg object javascript
JavaScript createElement y SVG (4)
Quiero crear gráficos SVG en línea usando Javascript.
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 anexará como un así no funcionará.
Hice una búsqueda pero todavía no pude encontrar una solución.
¿Alguien sabe una solución?
¡Muchas gracias!
document.createElementNS("http://www.w3.org/2000/svg","textPath");
resultados en
<textpath></textpath>
Acabo de resolver un problema similar. document.createElement (y asumo 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 trabajos en Chrome:
doc = document.implementation.createDocument (null, null, null); doc.createElementNS ("http://www.w3.org/2000/svg", "textPath");
obtendrá su nodo de caso mixto.
En primer lugar, use createElementNS, como lo está haciendo. createElement (sin NS) minúscula automáticamente los nombres de los elementos dentro de documentos HTML, de acuerdo con la documentación de Mozilla .
En segundo lugar, no confíe en la función "Inspeccionar elemento" de Google Chrome aquí. Parece mostrar todos los elementos en minúsculas, sin importar cuál sea el nombre de nodo real. Prueba 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 interrumpe 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>
Probablemente mi problema tenga algo que ver con el manejo defectuoso de animateMotion en Chrome ( Número 13585 ).
Su problema podría ser el mismo, o podría ser otro problema, pero asegúrese de que el inspector de elementos no lo engañe.
Espero que el siguiente ejemplo te ayude:
<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>
La respuesta dada es demasiado extensa y no es realmente útil para mí y me resulta muy molesto o simplemente para decirlo de otra manera. Si yo fuera usted, simplemente tendría en el elemento html con etiqueta decir:
<b id="myElement"></b>
y cuando tengo que crear un elemento o agregar información, simplemente haría:
document.getElementById(''myElement'').innerHTML = ''your stuff here'';
Espero que haya sido útil.