Introduction to SVG-based web page drawing API

I. What is SVG?

SVG is a 2D graphic description language released by W3C in 1999. It is a markup language based solely on XML format.

The full name is extensible vector graphics, which is very different from traditional raster graphics (JPG, PNG, GIF, etc.).

No. SVG is a 2D graphics development platform. It consists of two parts: XML-based data description and

The other part is a programmable API. Its key features support graphics, text, gradient fill, paint style, and graphics.

Special filter effects, such as Gaussian blur, will be demonstrated in code later. Also supports various mouse events and Dom

API. Almost all mainstream browsers support the reality and drawing of SVG graphics formats, and ie9 + and above have also started.

Supports SVG, and plug-ins are required in earlier versions of IE.

For more information about SVG visit here: http://www.w3.org/Graphics/SVG/About.html

Ii. svg api programming demonstration in Javascript

Create and obtain SVG objects

// Create SVG object

VaRMysvg = Document. createelementns ("http://www.w3.org/2000/svg", "SVG ");

Mysvg. setattribute ("version", "1.2"); // ie9 +
Support SVG 1.1 version

Mysvg. setattribute ("baseprofile", "tiny ");

Container. appendchild (mysvg );

 

Create a rectangular image in SVG:

VaRC1 = Document. createelementns ("http://www.w3.org/2000/svg", "rect ");

C1.setattribute ("X", "20 ");

C1.setattribute ("Y", "20 ");

C1.setattribute ("width", "150 ");

C1.setattribute ("height", "150 ");

C1.setattribute ("fill", "RGB (0,0, 255 )");

C1.setattribute ("stroke", "RGB (0, 0, 0 )");

C1.setattribute ("stroke-width", "4 ");

Mysvg. appendchild (C1 );

 

To draw text in SVG:

// SVG draw text

VaRStext = Document. createelementns ("http://www.w3.org/2000/svg", "text ");

Stext. setattribute ("X", "700 ");

Stext. setattribute ("Y", "100 ");

Stext. setattribute ("font-size", "18px ");

Stext. setattribute ("fill", "# ff0000 ");

VaRTextstring = Document. createtextnode ("Hello SVG ");

Stext. appendchild (textstring );

Mysvg. appendchild (stext );

 

Processing of mouse click events and mouseup events on SVG objects:

// Mouse event handling

C1.addeventlistener ("click", changecolor,False);

C2.addeventlistener ("mouseup", changecolor,False);

 

Use SVG
Gaussian Blur Using Image filters:

        <div id="blur-image-demo">        <div id="left" style="width:20%;"></div>        <div id="right" style="width:80%;">        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <filter id="f1" x="0" y="0">      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />    </filter>  </defs>  <image x="0" y="0" width="325" height="471" xlink:href="woniu.png" filter="url(#f1)"/></svg></div> </div>

Running effect:

Source code, which can be copied and run directly

Javascript Section

            window.onload = function() {            // get DIV            var container = document.getElementById("svgContainer");            // create svg object            var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");            mySvg.setAttribute("version", "1.2");// IE9+ support SVG 1.1 version            mySvg.setAttribute("baseProfile", "tiny");            container.appendChild(mySvg);                        // create svg shape - rectanglevar c1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");            c1.setAttribute("x", "20");            c1.setAttribute("y", "20");            c1.setAttribute("width", "150");            c1.setAttribute("height", "150");            c1.setAttribute("fill", "rgb(0,0,255)");            c1.setAttribute("stroke", "rgb(0,0,0)");            c1.setAttribute("stroke-width", "4");            mySvg.appendChild(c1);                        // create svg shape - circle            var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");            c2.setAttribute("cx", "250");            c2.setAttribute("cy", "100");            c2.setAttribute("r", "60");            c2.setAttribute("fill", "#996699");            c2.setAttribute("stroke", "#AA99FF");            c2.setAttribute("stroke-width", "7");            mySvg.appendChild(c2);                        // create svg shape - ellipse            var c3 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");            c3.setAttribute("cx", "450");            c3.setAttribute("cy", "100");            c3.setAttribute("rx", "100");            c3.setAttribute("ry", "50");            c3.setAttribute("fill", "#FF0000");            c3.setAttribute("stroke", "purple");            c3.setAttribute("stroke-width", "3");            mySvg.appendChild(c3);                        // create svg shape - draw lines            for(var i=0; i<10; i++){            var sline = document.createElementNS("http://www.w3.org/2000/svg", "line");            var x1 = 580 + i*10;            console.log(x1);                        sline.setAttribute("x1", x1.toString());            sline.setAttribute("y1", "10");            sline.setAttribute("x2", x1.toString());            sline.setAttribute("y2", "180");            sline.setAttribute("stroke", "rgb(0,255,0)");            sline.setAttribute("stroke-width", "2");                mySvg.appendChild(sline);}                    // SVG draw text        var stext = document.createElementNS("http://www.w3.org/2000/svg", "text");        stext.setAttribute("x", "700");        stext.setAttribute("y", "100");        stext.setAttribute("font-size", "18px");        stext.setAttribute("fill", "#FF0000");        var textString = document.createTextNode("Hello SVG");        stext.appendChild(textString);        mySvg.appendChild(stext);                        // mouse event handling            c1.addEventListener("click", changeColor, false);            c2.addEventListener("mouseup", changeColor, false);            };                        function changeColor(evt) {                var target = evt.target;                target.setAttributeNS(null, "fill", "green");            }

HTML section:

For reprint, be sure to indicate the source