What does svg do in javascript?

In JavaScript, svg refers to scalable vector graphics, which is a graphics format based on XML for describing two-dimensional vector graphics. "svg.js" is a lightweight JavaScript library that can operate svg and define animation.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What does svg do in javascript?

What is SVG?

SVG refers to Scalable Vector Graphics

SVG is used to define vector-based graphics for the web

SVG uses XML format to define graphics

SVG images can be enlarged or resized without losing graphic quality

SVG is a standard of the World Wide Web Consortium

SVG is compatible with tools such as DOM and XSL The W3C standard is a holistic

Introduction:

SVG.js is a lightweight JavaScript library that allows you to easily manipulate SVG and define animations.

SVG (Scalable Vector Graphics) is a graphics format based on XML that is used to describe two-dimensional vector graphics. SVG is developed by W3C and is an open standard.

SVG.js contains a large number of methods for defining animations, such as movement, scaling, rotation, tilt, etc. For details, please refer to the relevant demonstrations.

•Easy to read and concise syntax

•Very lightweight, the gzip compressed version is only 5k

•Animated elements for size, position, color, etc.

•Modular structure, easy expansion

•Various practical plug-ins

•Uniform API among various shape types.

•Elements can be bound to events, Touch events included

• Full support for opacity masks

• Element groups

• Dynamic gradients

• Fill modes

• Complete Documentation

Create an SVG document

Use the SVG() function to create an SVG document within a given html element:

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

The parameters in SVG() can be the id of an element or the element itself.

The above two sentences will produce the following code in the html document:

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

Of course, to define the size of the SVG canvas, in addition to using pixels, you can also use percentages. As follows:

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

Detect browser support for SVG

Before using svg.js, you can use the following code to detect browser support for the svg.js library:

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

ViewBox

486d7a50595533609bc98d44595dc670’s properties can be determined using the viewbox() method. The viewbox() method is like a setter function, as shown below:

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

The above line of code is equivalent to the following line of code. The first two parameters represent the position of 486d7a50595533609bc98d44595dc670, and the last two are its width and height.

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

If there are no parameters, then the viewbox will directly return an empty 486d7a50595533609bc98d44595dc670:

var box = draw.viewbox()

The viewbox() method can have the zoom attribute,

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

If the viewbox The size of 486d7a50595533609bc98d44595dc670 is the same as the size of the actual SVG canvas, then the value of zoom is 1.

SVG document

svg.js can also be found in Working outside the htmlDOM, as shown below, is a standalone svg file, just like an external js file.

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

Related recommendations: javascript learning tutorial

The above is the detailed content of What does svg do in javascript?. For more information, please follow other related articles on the PHP Chinese website!