web-dev-qa-db-de.com

Erstellen von SVG-Grafiken mit Javascript?

Wie kann ich mit Javascript SVG-Grafiken erstellen?

Unterstützen alle Browser SVG?

78
user123757

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 zum Beispiel unterstützt einfaches SVG, aber im Moment fehlen 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"); 
32
schnaader

Diese Antwort stammt aus dem Jahr 2009. Jetzt ein Community-Wiki, falls jemand daran interessiert ist, es auf den neuesten Stand zu bringen.

IE benötigt ein Plugin, um SVG anzuzeigen. Am gebräuchlichsten ist der, der von Adobe heruntergeladen werden kann. Adobe unterstützt oder entwickelt es jedoch nicht mehr. Firefox, Opera, Chrome, Safari zeigen alle grundlegende SVG-Dateien in Ordnung an, stoßen jedoch auf Probleme, wenn erweiterte Funktionen verwendet werden, 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. Das oben erstellte SVGCircleElement verfügt beispielsweise über die Attribute cx, cy und r für den Mittelpunkt und den Radius, auf die direkt zugegriffen werden kann. Dies sind die SVGAnimatedLength-Attribute, die eine baseVal -Eigenschaft für den Normalwert und eine animVal -Eigenschaft für den animierten Wert haben. Momentan unterstützen Browser die Eigenschaft animVal nicht zuverlässig. baseVal ist eine SVGLength, deren Wert durch die Eigenschaft value festgelegt wird.

Daher kann man für Skriptanimationen auch diese DOM-Eigenschaften festlegen, um SVG zu steuern. 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);
23
fuzzyTew

Um es browserübergreifend zu machen, empfehle ich dringend RaphaelJS . Es hat eine verdammt gute API und VML im IE, das SVG nicht versteht.

18
Boldewyn

Alle modernen Browser außer IE unterstützen SVG

In diesem Tutorial erfahren Sie Schritt für Schritt, wie Sie mit SVG mithilfe von Javascript arbeiten:

SVG Scripting mit JavaScript Teil 1: Einfacher Kreis

Wie Boldewyn hat schon gesagt wenn du willst

Um es browserübergreifend zu machen, 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.

9
U.Ahmad

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

7
Bakhtiyor

Ich habe keine konforme Antwort gefunden, also erstelle einen Kreis und füge ihn zu Svg hinzu.

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>
5
themadmax

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 unterstützt und über den Adobe SVG-Viewer oder den Renesis-Player im IE können Sie Grafiken auf Ihren Webseiten anzeigen. Jetzt können Sie die SVG-Zeichenfläche ganz einfach über Ihren JavaScript-Code steuern.

2
Trevor Robinson

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

Derzeit unterstützen alle aktuellen Versionen der Browser SVG v1.1. SVG v2.0 befindet sich in Working Draft und ist zu früh, um es zu verwenden.

Dieser Artikel beschreibt die Interaktion mit SVG mithilfe von Javascript und verweist auf Links zur Browserunterstützung. Schnittstelle zu SVG

2
Phil

Sie können d3.js verwenden. Es ist einfach zu bedienen und leistungsstark.

D3.js ist eine JavaScript-Bibliothek zum Bearbeiten von Dokumenten basierend auf Daten. Mit D3 können Sie Daten mit HTML, SVG und CSS zum Leben erwecken.

2
Nikunj Aggarwal

Nein, nicht alle Browser unterstützen SVG. Ich glaube, IE benötigt ein Plugin, um sie zu verwenden. Da svg nur ein XML-Dokument ist, kann JavaScript sie erstellen. Ich bin mir nicht sicher, ob ich sie in den Browser laden kann. Ich habe das nicht ausprobiert .

Dieser Link enthält Informationen zu Javascript und Svg:

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

2
kemiller2002

IE 9 unterstützt jetzt Basic SVG 1.1. Es war an der Zeit, obwohl IE9 immer noch weit hinter Google Chrome und Firefox SVG-Unterstützung zurückliegt.

http://msdn.Microsoft.com/en-us/ie/hh410107.aspx

0
oabarca

Wenn Sie also Ihre SVG-Inhalte Stück für Stück in JS erstellen möchten, verwenden Sie nicht einfach createElement(), diese zeichnen nicht. Verwenden Sie stattdessen Folgendes:

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