Was macht SVG in Javascript?

In JavaScript bezieht sich SVG auf skalierbare Vektorgrafiken, ein auf XML basierendes Grafikformat zur Beschreibung zweidimensionaler Vektorgrafiken. „svg.js“ ist eine leichte JavaScript-Bibliothek, die SVG bedienen und Animationen definieren kann.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist SVG in Javascript?

Was ist SVG?

SVG bezieht sich auf skalierbare Vektorgrafiken

SVG wird verwendet, um vektorbasierte Grafiken für das Web zu definieren.

SVG verwendet das XML-Format, um Grafiken zu definieren SVG ist ein Standard des World Wide Web Consortium

SVG ist in W3C-Standards wie DOM und XSL integriert

Einführung:

SVG.js ist eine leichte JavaScript-Bibliothek, mit der Sie SVG einfach bearbeiten und Animationen definieren können. SVG (Scalable Vector Graphics) ist ein auf XML basierendes Grafikformat, das zur Beschreibung zweidimensionaler Vektorgrafiken verwendet wird. SVG wird vom W3C entwickelt und ist ein offener Standard.

SVG.js enthält eine Vielzahl von Methoden zum Definieren von Animationen, wie Bewegung, Skalierung, Drehung, Neigung usw. Einzelheiten finden Sie in den entsprechenden Demos.

•Einfach zu lesende und prägnante Syntax

•Sehr leichtgewichtig, die gzip-komprimierte Version ist nur 5 KB groß

•Animationselemente für Größe, Position, Farbe usw.

•Modularer Aufbau, einfache Erweiterung

•Verschiedene praktische Stecker -ins

• Einheitliche API für verschiedene Formtypen

• Elemente können an Ereignisse gebunden werden, einschließlich Berührungsereignissen

• Volle Unterstützung für Deckkraftmasken

• Elementgruppen

• Dynamische Farbverläufe

• Füllmodi

•Vollständige Dokumentation

Erstellen Sie ein SVG-Dokument

Verwenden Sie die Funktion SVG(), um ein SVG-Dokument in einem bestimmten HTML-Element zu erstellen:

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

Der Parameter in SVG() kann die ID eines Elements oder das Element selbst sein .

Die beiden obigen Sätze erzeugen den folgenden Code im HTML-Dokument:

<div id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>

Natürlich können Sie zum Definieren der Größe der SVG-Leinwand neben der Verwendung von Pixeln auch Prozentsätze verwenden. Wie folgt:

var draw = SVG('canvas').size('100%', '100%')

Browser-Unterstützung für SVG erkennen

Bevor Sie SVG.js verwenden, können Sie den folgenden Code verwenden, um die Browser-Unterstützung für die SVG.js-Bibliothek zu erkennen:

if (SVG.supported) { 
var draw = SVG('canvas') 
var rect = draw.rect(100,100) } 
else { 
alert('SVG not supported') }

ViewBox

1d4aa68a3a35c3a20cf874bb00fa9dd8 Die Methode viewbox() ähnelt einer Setter-Funktion, wie unten gezeigt:

draw.viewbox(0,0,297,210)

Die obige Codezeile entspricht der folgenden Codezeile. Die ersten beiden Parameter stellen die Position von < dar ;svg>, die letzten beiden sind Breite und Höhe.

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

Wenn keine Parameter vorhanden sind, gibt die Viewbox direkt ein leeres 486d7a50595533609bc98d44595dc670 zurück:

var box = draw.viewbox()

viewbox()-Methode kann das Zoom-Attribut haben,

var box = draw.viewbox() var zoom = box.zoom

Wenn die Größe von 486d7a50595533609bc98d44595dc670 das gleiche wie das tatsächliche SVG. Die Größe der Leinwand ist gleich, dann beträgt der Zoomwert 1.

SVG-Dokument

svg.js kann auch außerhalb des HTMLDOM funktionieren, wie unten gezeigt, ist es ein unabhängiges SVG Datei, genau wie eine externe js-Datei.

<?xml version="1.0" encoding="utf-8" ?> 
<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"> 
<script type="text/javascript"xlink:href="svg.min.js">
</script> 
<scripttype="text/javascript"> 
<![CDATA[ 
var draw = SVG(&#39;viewport&#39;) 
draw.rect(100,100).animate().fill(&#39;#f03&#39;).move(100,100) 
]]> 
</script> 
</svg>

Verwandte Empfehlungen:

Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWas macht SVG in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!