Wie kann ich SVG-Grafiken mit JavaScript erstellen?
Unterstützen alle Browser SVG?
javascript
graphics
svg
user123757
quelle
quelle
Antworten:
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");
quelle
evt
hierevt
. Eine funktionierende Lösung finden Sie in der Antwort von themadmax.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
,cy
undr
Attribute für den Mittelpunkt und Radius, die direkt zugegriffen werden kann. Dies sind die SVGAnimatedLength-Attribute, die einebaseVal
Eigenschaft für den Normalwert und eineanimVal
Eigenschaft für den animierten Wert haben. Browser unterstützen dieanimVal
Immobilie derzeit nicht zuverlässig .baseVal
ist eine SVGLength, deren Wert von dervalue
Eigenschaft 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);
quelle
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.
quelle
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:
Wie Boldewyn schon gesagt hat, wenn Sie wollen
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.
quelle
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.
quelle
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>
quelle
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
quelle
Es gibt ein jQuery-Plugin, mit dem Sie SVG über Javascript bearbeiten können:
http://plugins.jquery.com/project/svg
Aus seinem Intro:
quelle
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 mithilfe von HTML, SVG und CSS zum Leben erwecken.quelle
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
quelle
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
quelle
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");
quelle
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> `;
Code-Snippet anzeigen
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>
quelle