SVG-Grafiken mit Javascript erstellen?

80

Wie kann ich SVG-Grafiken mit JavaScript erstellen?

Unterstützen alle Browser SVG?

user123757
quelle
2
Nach 2 Jahren kann die SVG-Entwicklung sagen, dass es eine schöne Sache ist, aber ohne die volle Unterstützung aller gängigen Browser ist es nicht schlimmer, verwendet zu werden. Wenn Sie eine neue App starten, wählen Sie stattdessen ein anderes Format.
Kamarey
31
Wenn Sie diese Frage und Antworten lesen, achten Sie darauf, dass sich seit der Beantwortung der Frage im Jahr 2009 viel entwickelt hat und SVG jetzt von allen gängigen Browsern nativ unterstützt wird (keine Polyfills erforderlich)!
Jeach
1
Hier ist ein Link, um die tatsächlich unterstützten Browser anzuzeigen. caniuse.com/#feat=svg Es ist definitiv sicher, svg heutzutage zu verwenden.
Lukas Liesis

Antworten:

30

Schauen Sie sich diese Liste auf Wikipedia an, welche Browser SVG unterstützen. Es enthält auch Links zu weiteren Details in den Fußnoten. Firefox unterstützt beispielsweise grundlegende SVG-Funktionen, es fehlen jedoch derzeit die meisten Animationsfunktionen.

Ein Tutorial zum Erstellen von SVG-Objekten mit Javascript finden Sie hier :

var svgns = "http://www.w3.org/2000/svg";
var svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green"); 
Schnaader
quelle
32
was ist evthier
Johann
@ Aculeo: Danke, behoben.
Schnaader
Gibt es schon eine Lösung für Firefox?
Dinesh
1
Das solltest du wirklich erklären evt. Eine funktionierende Lösung finden Sie in der Antwort von themadmax.
AldaronLau
24

Diese Antwort stammt aus dem Jahr 2009. Jetzt ein Community-Wiki für den Fall, dass jemand es auf den neuesten Stand bringen möchte.

IE benötigt ein Plugin, um SVG anzuzeigen. Am gebräuchlichsten ist die, die von Adobe heruntergeladen werden kann. Adobe unterstützt oder entwickelt es jedoch nicht mehr. Firefox, Opera, Chrome und Safari zeigen alle grundlegende SVG-Funktionen an, stoßen jedoch bei Verwendung erweiterter Funktionen auf Macken, da die Unterstützung unvollständig ist. Firefox unterstützt keine deklarative Animation.

SVG-Elemente können mit Javascript wie folgt erstellt werden:

// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");
// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);

Die SVG-Spezifikation beschreibt die DOM-Schnittstellen für alle SVG-Elemente. Zum Beispiel kann die SVGCircleElement, die oben erstellt wird, hat cx, cyund rAttribute für den Mittelpunkt und Radius, die direkt zugegriffen werden kann. Dies sind die SVGAnimatedLength-Attribute, die eine baseValEigenschaft für den Normalwert und eine animValEigenschaft für den animierten Wert haben. Browser unterstützen die animValImmobilie derzeit nicht zuverlässig . baseValist eine SVGLength, deren Wert von der valueEigenschaft festgelegt wird.

Daher können für Skriptanimationen diese DOM-Eigenschaften auch zur Steuerung von SVG festgelegt werden. Der folgende Code sollte dem obigen Code entsprechen:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.cx.baseVal.value = 25;
shape.cy.baseVal.value = 25;
shape.r.baseVal.value = 20;
shape.setAttribute("fill", "green");
document.documentElement.appendChild(shape);
fuzzyTew
quelle
5
Dies ist nicht mehr wahr und diese Antwort sollte aktualisiert oder entfernt werden.
David Mårtensson
18

Um dies browserübergreifend zu tun, empfehle ich RaphaelJS . Es hat eine verdammt gute API und macht VML im IE, das SVG nicht verstehen kann.

Boldewyn
quelle
9

Alle modernen Browser außer IE unterstützen SVG

Hier ist ein Tutorial, das eine schrittweise Anleitung zur Arbeit mit SVG mit Javascript enthält:

SVG-Scripting mit JavaScript Teil 1: Einfacher Kreis

Wie Boldewyn schon gesagt hat, wenn Sie wollen

Um dies browserübergreifend zu tun, empfehle ich RaphaelJS: rapaheljs.com

Obwohl ich momentan der Meinung bin, dass die Bibliothek zu groß ist. Es hat viele großartige Funktionen, von denen einige möglicherweise nicht benötigt werden.

U. Ahmad
quelle
"Alle modernen Browser außer IE"? :)
Tuomassalo
2
Keine IE-Version ist modern. Im Fall von SVG unterstützt IE (bis v11) SMIL nicht. Vergessen Sie also interessante Animationen!
Geek Stocks
7

Ich mag die jQuery SVG- Bibliothek sehr. Es hilft mir jedes Mal, wenn ich mit SVG manipulieren muss. Es erleichtert wirklich die Arbeit mit SVG aus JavaScript.

Bakhtiyor
quelle
5

Ich habe keine konforme Antwort gefunden. Um einen Kreis zu erstellen und zu svg hinzuzufügen, versuchen Sie Folgendes:

var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svg');
var shape = document.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green");
svg.appendChild(shape);
<svg id="svg" width="100" height="100"></svg>

themadmax
quelle
2

Nein, nicht alle Browser unterstützen SVG. Ich glaube, IE braucht ein Plugin, um sie zu verwenden. Da svg nur ein XML-Dokument ist, kann JavaScript sie erstellen. Ich bin mir jedoch nicht sicher, ob ich es in den Browser laden soll. Das habe ich nicht versucht.

Dieser Link enthält Informationen zu Javascript und SVG:

http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

kemiller2002
quelle
2

Es gibt ein jQuery-Plugin, mit dem Sie SVG über Javascript bearbeiten können:

http://plugins.jquery.com/project/svg

Aus seinem Intro:

SVG wird nativ in Firefox, Opera und Safari sowie über den Adobe SVG-Viewer oder den Renesis-Player im IE unterstützt und ermöglicht die Anzeige von Grafiken auf Ihren Webseiten. Jetzt können Sie die SVG-Zeichenfläche einfach über Ihren JavaScript-Code steuern.

Trevor Robinson
quelle
2

Es gibt mehrere Bibliotheken für SVG-Grafiken, die Javascript verwenden, wie z. B.: Snap, Raphael, D3. Oder Sie können die SVG direkt mit einfachem Javascript verbinden.

Derzeit unterstützen alle neuesten Versionen der Browser SVG v1.1. SVG v2.0 befindet sich im Arbeitsentwurf und ist zu früh, um ihn zu verwenden.

Dieser Artikel zeigt, wie Sie mit Javascript mit SVG interagieren, und verweist auf Links zur Browserunterstützung. Schnittstelle mit SVG

Phil
quelle
0

Wenn Sie also Ihre SVG-Inhalte Stück für Stück in JS erstellen möchten, verwenden Sie nicht nur createElement(), diese werden nicht gezeichnet, sondern verwenden Sie stattdessen Folgendes:

var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");
OsamaBinLogin
quelle
-1

Derzeit unterstützen alle gängigen Browser svg . Das Erstellen von SVG in JS ist sehr einfach (derzeit innerHTML=...ist es ziemlich schnell )

element.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
`;

Kamil Kiełczewski
quelle