Svg. js instance tutorial and User Manual (1). svg. js instance tutorial

Svg. js instance tutorial and User Manual (1). svg. js instance tutorial

What is SVG?

SVG refers to Scalable Vector Graphics)

SVG is used to define vector-Based Graphics for Networks

SVG defines images in XML format

The image quality of SVG images is not lost when they are enlarged or changed.

SVG is the standard of the World Wide Web Alliance

SVG is integrated with W3C standards such as DOM and XSL.

Introduction:

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

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

SVG. js contains a large number of animation-defining methods, such as movement, scaling, rotation, and skew. For details, see the relevant demonstration.

Some highlights of SVG. js:

• Easy-to-read and concise syntax

• Very lightweight, gzip compressed version only 5 k

• Animation elements such as size, position, and color

• Modular structure for easy scalability

• Various practical plug-ins

• Unified APIs are available for various shape types.

• Elements can be bound to events, including touch events

• Transparent masks are fully supported.

• Element Group

• Dynamic gradient

• Fill Mode

• Complete documentation

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(300, 300)var rect = draw.rect(100, 100).attr({ fill: '#f06' })

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

The above two sentences will generate 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, you can also use percentages in addition to pixels. As follows:

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

Detects the browser's support for SVG

Before using svg. js, you can use the following code to check 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 supported') }

ViewBox

The attributes of <svg> 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 <svg> position, and the last two are their width and height.

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

If no parameter exists, viewbox returns an empty <svg>:

var box = draw.viewbox()

The viewbox () method can have the zoom attribute,

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

If the size of <svg> In viewbox is the same as that of the actual SVG canvas, the zoom value is 1.

SVG document

Svg. js can also work outside htmlDOM, as shown below. It is an independent 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('viewport') draw.rect(100,100).animate().fill('#f03').move(100,100) ]]> </script> </svg>

The above is a small part of the Svg. js instance tutorial and detailed instructions in the User Manual (1). the usage of other methods of svg. js will be continuously updated below. Stay tuned!