Que fait svg en javascript ?

En JavaScript, svg fait référence à des graphiques vectoriels évolutifs, qui est un format graphique basé sur XML pour décrire des graphiques vectoriels bidimensionnels. "svg.js" est une bibliothèque JavaScript légère qui peut faire fonctionner SVG et définir des animations.

L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.

Qu'est-ce que SVG en Javascript ?

Qu'est-ce que SVG ?

SVG fait référence à Scalable Vector Graphics

SVG est utilisé pour définir des graphiques vectoriels pour le Web

SVG utilise le format XML pour définir des graphiques

Les images SVG ont des graphiques lorsqu'elles sont agrandies ou redimensionnées Aucune perte de qualité

SVG est un standard du World Wide Web Consortium

SVG est intégré aux standards du W3C tels que DOM et XSL

Introduction :

SVG.js est une bibliothèque JavaScript légère, vous permet de manipuler facilement SVG et de définir des animations.

SVG (Scalable Vector Graphics) est un format graphique basé sur XML utilisé pour décrire des graphiques vectoriels bidimensionnels. SVG est développé par le W3C et est un standard ouvert.

SVG.js contient un grand nombre de méthodes pour définir des animations, telles que le mouvement, la mise à l'échelle, la rotation, l'inclinaison, etc. Pour plus de détails, veuillez vous référer aux démos concernées.

•Syntaxe facile à lire et concise

•Très légère, la version compressée gzip ne fait que 5k

•Éléments d'animation pour la taille, la position, la couleur, etc.

•Structure modulaire, extension facile

•Divers plug-ins pratiques -ins

• API unifiée pour différents types de formes

• Les éléments peuvent être liés à des événements, y compris les événements tactiles

• Prise en charge complète des masques d'opacité

• Groupes d'éléments

• Dégradés dynamiques

• Modes de remplissage

•Documentation complète

Créer un document SVG

Utilisez la fonction SVG() pour créer un document SVG dans un élément html donné :

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

Le paramètre dans SVG() peut être l'identifiant d'un élément ou l'élément lui-même .

Les deux phrases ci-dessus produiront le code suivant dans le document html :

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

Bien sûr, pour définir la taille du canevas SVG, en plus d'utiliser des pixels, vous pouvez également utiliser des pourcentages. Comme suit :

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

Détecter la prise en charge du navigateur pour SVG

Avant d'utiliser svg.js, vous pouvez utiliser le code suivant pour détecter la prise en charge du navigateur pour la bibliothèque svg.js :

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

ViewBox

< être déterminé à l'aide de la méthode viewbox(). La méthode viewbox() est comme une fonction de définition, comme indiqué ci-dessous :

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

La ligne de code ci-dessus est équivalente à la ligne de code suivante. Les deux premiers paramètres représentent la position de <. ;svg>, les deux derniers étant sa largeur et sa hauteur.

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

S'il n'y a pas de paramètres, alors la viewbox renverra directement un

var box = draw.viewbox()

viewbox() peut avoir l'attribut zoom,

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

Si la taille de

Document SVG

svg.js peut également fonctionner en dehors du htmlDOM, comme indiqué ci-dessous, il s'agit d'un svg indépendant fichier, tout comme un fichier js externe.

<?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>

Recommandations associées : Tutoriel d'apprentissage Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!