Wie kann ich ein Attribut mit Berücksichtigung Groß-und Kleinschreibung in einem JavaScript-Element

Question

Ich erstelle ein svg Element in Javascript und ich muss ein Attribut, das Groß-und Kleinschreibung ist: viewBox.

Das Element wie folgt erstellt: var svgElem = document.createElement('svg');

Problem ist, wenn es um das DOM, zeigt das resultierende Element wie folgt das Attribut über svgElem.setAttribute("viewBox", "0,0,100,100") und fügen Sie ein: <svg viewbox="0,0,100,100"></svg>

Dies gilt, weil nicht funktioniert die viewBox ist Groß-und Kleinschreibung, es wird keine Wirkung, wenn der Brief B ist Kleinbuchstaben.

IE allows an IFlag parameter nur für Fälle wie diese, jedoch ist meine Zielgruppe auf FireFox und Chrome-Benutzer beschränkt, die kein IFlag für setAttribute haben, soweit ich finden konnte.

Gibt es eine Möglichkeit, dies ohne Verwendung von innerHTML und No-Library-Javascript zu arbeiten?

EDIT: Ich habe auch Punktnotation ohne Erfolg svg.viewBox = "0,0,100,100"

Answer 1

Sie benötigen ein aktuelles svg Element zu erstellen. Wenn Sie das tun:

var svg = document.createElement('svg'); 

was bekommen Sie eigentlich ist ein HTML-Element svg genannt, nicht ein SVG-Element. Der Schlüssel hier ist, dass SVG nicht wirklich ein HTML-Element ist, es ist ein fremdes Dokumentenstammverzeichnis. So erstellen Sie richtig ein SVG-Element, müssen Sie

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

Insbesondere das schafft ein XML-Element zu tun, anstatt ein HTML-Element. Im Grunde Browser Fall

document.createElement('div') 

ist die gleiche wie

document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); 

Das macht einen großen Unterschied, weil in HTML, Attributnamen nicht case-sensitive sind, während sie in XML, sie sind. Wenn Sie dieses SVG an das DOM anhängen, verhält es sich auch wie ein div, da es sich um ein unbekanntes HTML-Element und nicht um ein echtes SVG-Element handelt. Ein HTML-Parser ist schlau genug, um einen fremden Wurzelknoten anstelle eines unbekannten HTML-Elements zu erstellen, aber Ihr Code ist programmatisch und kann daher nicht automatisch ausgeführt werden.

Answer 2

Es funktioniert gut für mich in Chrome und Firefox versucht, mit.

var svgns = "http://www.w3.org/2000/svg"; 
 

 
var svg = document.createElementNS(svgns, "svg"); 
 
svg.setAttribute("width", "400"); 
 
svg.setAttribute("height", "400"); 
 

 
var circle = document.createElementNS(svgns, "circle"); 
 
circle.setAttribute("cx", "300"); 
 
circle.setAttribute("cy", "300"); 
 
circle.setAttribute("r", "100"); 
 
svg.appendChild(circle); 
 

 
document.getElementById("container").appendChild(svg); 
 

 
// Now change the viewBox 
 
svg.setAttribute("viewBox", "200 200 200 200");

<div id="container"> 
 
</div>

(Hinweis: aktualisiert, um die SVG von Grund auf neu zu erstellen, wie OPs Anfrage)

Answer 3

Sie sollten den Wert mit Create finden Setting attribute value of an element in camelCase using a directive

var div1 = document.createElementNS("http://blabla/svg", "view"); 
var attr1 = document.createAttribute("viewBox"); 
attr1.value = "200 200 200 200"; 
div1.setAttributeNode(attr1);