svg.js Example Tutorials and manual details (i) _javascript skills

What is SVG?

SVG refers to scalable vector graphics (Scalable vector Graphics)

SVG is used to define vector based graphics for the network

SVG uses XML format to define graphics

SVG images will not lose their graphic quality when zooming in or changing size

SVG is the standard of the World Wide Web Consortium

SVG and the standards of the global consortium, such as DOM and XSL, are a whole

Brief introduction:

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

SVG (Scalable vector Graphics, Scalable Vector graphics) is an xml-based, graphical format for describing two-dimensional vector graphics. SVG is set up by the consortium and is an open standard.

The svg.js contains a number of methods for defining animations, such as moving, scaling, rotating, skewing, and more, as shown in the relevant demo.

Some highlights in the Svg.js:

• Easy to read and concise grammar

• Very lightweight, gzip compressed version only 5k

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

• Modular architecture for easy expansion

• Various utility Plug-ins

• A unified API between various shape types.

• Elements can bind events, including touch events

• Full support for opaque masks

• Element Group

• Dynamic gradients

• Fill Mode

• Complete Document Records

Instructions for use:

Create an SVG document

Use the SVG () function to create an SVG document in a given HTML element:

var draw = SVG (' canvas '). Size ($)
var rect = draw.rect. attr ({fill: ' #f06 '})

Where the parameters in SVG () can make an element's ID or 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=" height= "> <rect width=" height= "" "Fill=" "
#f06" ></rect >
</svg>
</div>

Of course, to define the size of the SVG canvas, you can use percentages in addition to pixel use. 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 the browser's support for the Svg.js library:

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

Viewbox

The <svg> properties can be determined by the Viewbox () method, which is like a setter function, as follows: Viewbox

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

The preceding line of code is equivalent to the following line of code, with the first two parameters representing the position of <svg>, and the latter two being its width and height.

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

If there are no arguments, then viewbox directly returns an empty <SVG>:

var box = Draw.viewbox ()

The Viewbox () method can have zoom properties,

var box = Draw.viewbox () var zoom = Box.zoom

If the size of the <svg> in the Viewbox is the same size as the actual SVG canvas, then the zoom value is 1.

SVG Documents

Svg.js can also work outside the Htmldom, as shown below, is a stand-alone SVG file, just like an external JS file.

<?xml version= "1.0" encoding= "Utf-8"?> <svg "id=" 
viewport "xmlns=" xmlns: xlink= "Http://www.w3.org/1999/xlink" version= "1.1" > <script type= "Text/javascript" 
Svg.min.js ">
</script> 
<scripttype=" Text/javascript "> 
<![ cdata[ 
var draw = SVG (' viewport ') 
draw.rect (100,100). Animate (). Fill (' #f03 '). Move (100,100) 
]]> 
</script> 
</svg>

The above is a small set to introduce the Svg.js example tutorial and the use of manual details (i), the following will continue to update svg.js the use of other methods, please pay attention!