SVG-Grafiken mit Javascript erstellen?

Wie kann ich SVG-Grafiken mit JavaScript erstellen?

Unterstützen alle Browser SVG?

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"); 

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);

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.

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.

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.

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>

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

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.

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

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

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

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

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

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");

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>
`;

function createSVG() {
  box.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
  `;
}

function decRadius() {
  r=circ.getAttribute('r');
  circ.setAttribute('r',r*0.5);
}

<button onclick="createSVG()">Create SVG</button>
<button onclick="decRadius()">Decrease radius</button>
<div id="box"></div>