One: what is SVG
SVG is a 1999 2D graphic description Language published by the consortium, a purely XML-based markup language, SVG
The full name is a large difference between scalable vector graphics and traditional raster graphics (JPG, PNG, GIF, etc.)
Don't. SVG is a 2D graphics development platform, including two parts, one is based on the XML language data description, and the other
The outside part is a programmable API with key features that support graphics, text, gradient fills, brush styles, graphics
The effect filter, such as Gaussian blur, will be demonstrated in later code. also supports various mouse events and Dom Department
Sub API. Almost all mainstream browsers support the reality and rendering of SVG graphics formats, and ie9+ above also begins
Supports SVG and requires plug-in support in a lower version of IE.
Learn more about SVG access here: http://www.w3.org/Graphics/SVG/About.html
Second: JavaScript in the SVG API programming demo
Create and get SVG objects
Copy Code code as follows:
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);
To create a rectangular graphic in SVG:
Copy Code code as follows:
var 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);
To implement text rendering in SVG:
Copy Code code as follows:
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);
Implement mouse click event handling and MouseUp event handling on SVG objects:
Copy Code code as follows:
Mouse Event Handling
C1.addeventlistener ("click", Changecolor,false);
C2.addeventlistener ("MouseUp", Changecolor,false);
Gaussian blur via SVG graphics filters:
Copy Code code as follows:
<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>
Operation Effect:
Source code, you can copy directly run
JavaScript section
Copy Code code as follows:
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-rectangle
var 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:
Copy Code code as follows:
<title>gloomyfish SVG demo</title>
<style>
#svgContainer {
width:800px;
height:200px;
Background-color: #EEEEEE;
}
#left {float:left;}
#right {float:right;}
</style>
<body>
<div id= "Svgcontainer" ></div>
<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>
</body>
