Ich erstelle ein svg Element in Javascript und muss ein Attribut setzen, das die Groß- / Kleinschreibung beachtet: viewBox .
Das Element wird wie folgt erstellt: var svgElem = document.createElement('svg');
Problem ist, wenn dieses Attribut über svgElem.setAttribute("viewBox", "0,0,100,100") gesetzt und an das DOM angehängt wird, zeigt das resultierende Element folgendes:
<svg viewbox="0,0,100,100"></svg>
Dies funktioniert nicht, da viewBox Groß- und Kleinschreibung unterscheidet. Es wird keine Auswirkung haben, wenn der Buchstabe B klein geschrieben ist.
IE erlaubt einen IFlag-Parameter nur für Fälle wie Diese sind jedoch auf FireFox- und Chrome-Benutzer beschränkt, für die kein IFlag für setAttribute verfügbar ist.
Gibt es eine Möglichkeit, dies ohne die Verwendung von innerHTML und JavaScript zu machen?
EDIT: Ich habe auch versucht, Punktnotation ohne Erfolg svg.viewBox = "0,0,100,100"
Sie müssen ein tatsächliches svg -Element erstellen. Wenn du es tust:
Was Sie tatsächlich erhalten, ist ein HTML-Element namens svg , kein SVG-Element. Der Schlüssel hier ist, dass SVG nicht wirklich ein HTML-Element ist, es ist ein fremdes Dokumentenstammverzeichnis. Um ein SVG-Element richtig zu erstellen, müssen Sie
Dies erzeugt insbesondere ein XML-Element anstelle eines HTML-Elements. Im einfachen Browserfall
%Vor%ist dasselbe wie
%Vor% Das macht einen großen Unterschied, denn in HTML wird bei Attributnamen nicht zwischen Groß- und Kleinschreibung unterschieden, während dies bei XML der Fall ist. Wenn Sie diese 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, so dass er nicht automatisch ausgeführt werden kann.
Es funktioniert gut für mich in Chrome und Firefox.
(Hinweis: aktualisiert, um das SVG von Grund auf neu zu erstellen, je nach OP-Anfrage)
Sie sollten den Wert mit createAttribute erstellen, siehe Festlegen des Attributwerts eines Elements in CamelCase mithilfe von a Richtlinie
%Vor%Tags und Links javascript html svg