Shulou(Shulou.com)06/02 Report--

This article is to share with you about the use of svg in javascript. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

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 drawings

The graphic quality of SVG image will not be lost when it is enlarged or changed in size.

SVG is the standard of the World wide Web Consortium

SVG is integrated with W3C standards such as DOM and XSL

Brief introduction:

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

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

SVG.js contains a large number of methods for defining animation, such as moving, scaling, rotating, tilting, and so on, as shown in the demo.

A concise grammar that is easy to read

Very lightweight, the gzip compressed version is only 5k

Animation elements for size, position, color, etc.

Modular structure, easy to expand

Various practical plug-ins

There is a unified API among various shape types.

Elements can bind events, including touch events

Fully supports opaque masks

Element group

Dynamic gradual change

Filling mode

Complete documentation

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 parameter in SVG () can make the id of an element or the element itself.

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

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%')

Check the browser's support for SVG

Before using svg.js, you can test your browser's support for the svg.js library with the following code:

If (SVG.supported) {var draw = SVG ('canvas') var rect = draw.rect (100100)} else {alert (' SVG not supported')}

ViewBox

Can be determined by the viewbox () method, which is like a setter function, as follows:

Draw.viewbox (0Pol 0297210)

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

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

If there are no parameters, then viewbox directly returns an empty

Var box = draw.viewbox ()

The viewbox () method can have a zoom property

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

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

SVG document

Svg.js can also work outside of htmlDOM, as shown below, as a separate svg file, just like an external js file.

Thank you for reading! This is the end of this article on "what is the use of svg in javascript?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.