This article mainly introduces the Script Programming of SVG, and provides examples such as zoom in, zoom out, query, and mouse events.
1. Introduction to SVG
SVG, all called Scalable Vector Graphics (Scalable Vector Graphics ). It is an XML application standard developed by W3C to describe Images Using vectors. It has many advantages, such as scalability, dynamic and interactive. SVG supports stepless amplification. Any proportional amplification of SVG images will not damage the image display (without too much distortion). Other images, such as BMP and JPEG, do not support stepless amplification. SVG has animation elements. As long as an SVG animation element is embedded in the SVG file, the animation effect can be achieved. At the same time, SVG also defines a wide range of events, including mouse events and Keyboard Events. As long as you perform Script Programming on SVG, You can implement interactive operations on SVG files.
SVG has many basic graphic elements. By combining basic graphic elements, you can build an SVG file.
Ii. SVG Script Programming
In SVG, you can use scripting to perform complex interactive operations. SVG uses the <SCRIPT> element to insert a script into the SVG document. Its function is almost the same as the <SCRIPT> mark in HTML. The general format is:
<SCRIPT type = "text/JavaScript">
<! [CDATA [
<! -Insert a script here.ProgramSection -->
]>
</SCRIPT>
<SCRIPT> there are two attributes: TYPE = "Content-Type", which indicates the type of the script language used. By default, scripts use JavaScript. Xlink: href = "/blog/" <"; Uri>" indicates the URL to reference the external script file. The following example demonstrates the mouse event in SVG.
<SVG width = "400" Height = "200">
<SCRIPT> <! [CDATA [
Function showmsg ()
{
Alert ("You had clicked the green rect ");
}
]> </SCRIPT>
<G id = "rect1">
<Rect id = "rectangle" onclick = "showmsg ()" x = "50" Y = "50" width = "100" Height = "50" style = "fill: green "/> </G>
</SVG>
Enter the above information in the textCode, Open with IE, and click the green rectangle with the mouse. The message "you clicked the rectangle" is displayed.
Therefore, to implement Script Programming for SVG, you only need to add the event processing function (onclick = "showmsg ()") to the relevant elements ()"), then implement the relevant functions in the <SCRIPT> tag.
In addition, the implementation of time processing functions can be placed in the <SCRIPT> mark of SVG, or in the parent HTML file embedded with SVG, in this way, the data exchange between SVG and HTML is also convenient. For example, the following example.
SVG file: 1.svg
<SVG width = "400" Height = "200">
<G id = "rect1">
<Rect id = "rectangle" onclick = "showmsg ()" x = "50" Y = "50" width = "100" Height = "50" style = "fill: green "/> </G>
</SVG>
HTML file: a.html
<HTML>
<Script language = JavaScript>
<! -
Function showmsg ()
{
Alert ("You had clicked the green rect ");
}
// -->
</SCRIPT>
<Body>
<Embed name = "id1" pluginspage = "http://www.adobe.com/svg/viewer/install/" align =" TOP "src ="/blog/1.svg" Height = "200px" width = "200px" type = "image/SVG + XML ">
</Body>
</Html>
When you open the.html file, you will find that the effect is the same as in the preceding example.
SVG supports many events, such as onclick, onmousedown, onmouseup, onmouseout, onmousemove, and onload. For more events, see:
Iii. Script Programming Application Example
This section uses several examples to analyze the application of the script program in SVG.
1. mouse events (demonstrate how to use mouse events and common events)
See the following example:
<SVG width = "400" Height = "200">
<SCRIPT> <! [CDATA [
Function mout ()
{
Alert ("You are out ");
}
]> </SCRIPT>
<G id = "rect1">
<Rect id = "rectangle1" onmouseout = "mout ()" x = "50" Y = "50" width = "150" Height = "150" style = "fill: red "/>
</G>
</SVG>
Open the SVG file with IE. When you move your mouse away from the red rectangle, the message "you are out" is displayed ".
The following describes common mouse events and their trigger conditions.
Onmouseout
This event is triggered when the mouse moves an object (element ).
Onmousedown
This event is triggered when the mouse key is pressed on an object (element ).
Onmouseup
This event is triggered when the mouse key is released on an object (element ).
Onmousemove
This event is triggered when the mouse moves over an object (element ).
Onclick
This event is triggered when you click an object (element ).
For more events, see http://www.w3.org/tr/svg/interact.html.
Note that sometimes several events may occur at the same time. We can test the execution sequence of the response events.
2. Zoom in and out (demonstrate the Property Control of relevant elements in SVG by the script language)
The browser plug-in of SVG provides the zoom-in and zoom-out functions. However, in actual applications, we need to program the zoom-in and zoom-out functions of SVG image files. The following example uses SVG to modify the viewbox attribute to zoom in and out. (Put the processing function in the parent HTML file)
SVG file: 1.svg
<SVG viewbox = "0 0 400 200" id = "mainview">
<G>
<Text id = "texte" x = "200" Y = "100" style = "text-anchor: middle; font-size: 25; font-family: Arial; fill: red "> Haha, here! </Text>
</G>
</SVG>
HTML file: aa.html
<HTML>
<Body>
<Script language = "JavaScript">
Function FDA ()
{
VaR svgmainmapdoc = id1.getsvgdocument ();
VaR overmapview = svgmainmapdoc. getelementbyid ("mainview ");
Overmapview. setattribute ("viewbox", "100 50 200 100 ");
}
Function sxiao ()
{
VaR svgmainmapdoc = id1.getsvgdocument ();
VaR overmapview = svgmainmapdoc. getelementbyid ("mainview ");
Overmapview. setattribute ("viewbox", "-200-100 800 400 ");
}
</SCRIPT>
<Embed name = "id1" pluginspage = http://www.adobe.com/svg/viewer/install/ align = "TOP" src = "/blog/1.svg" Height =" 200px "width =" 400px "type =" image/SVG + XML ">
<Input type = "button" value = "zoom in" name = "FDA" onclick = "FDA ()">
<Input type = "button" value = "" name = "sxiao" onclick = "sxiao ()">
</Body>
</Html>
Open aa.html with IE, and press the zoom-in and zoom-out button to see the zoom-in and zoom-out effects. In HTML, get the DOM (Document Object Model) of the SVG document through getsvgdocument (), and then get the element pointer through getelementbyid and ID, set the element through setattribute (that is, the SVG element with the ID of mainview in this example ). The preceding functions are all Dom functions. For more Dom functions and introduction, you can refer to the examples on http://pilat.free.fr/routines/js_dom.htm.
The following describes how to zoom in and out through viewbox. There are four numbers in viewbox, which respectively indicate the differences between the minimum X coordinate, Y coordinate, maximum X coordinate and minimum X coordinate, and the maximum y coordinate and the minimum y coordinate. That is to say, viewbox represents the current display range. Therefore, you only need to change the value of viewbox to enlarge and narrow the SVG image.
3. query and highlight Properties
Attribute query has many applications in reality, and we can find things we are interested in through the query. The following describes how to query SVG attributes.
SVG file: 1.svg
<SVG viewbox = "0 0 400 400" id = "mainview">
<G id = "id1">
<Rect id = "rectangle" name = "A1" x = "0" Y = "0" width = "50" Height = "50" style = "fill: green "/>
<Rect id = "rectangle1" name = "A2" x = "50" Y = "50" width = "50" Height = "50" style = "fill: green "/>
<Rect id = "rectangle2" name = "A3" x = "100" Y = "100" width = "50" Height = "50" style = "fill: green "/>
<Rect id = "rectangle3" name = "A4" x = "150" Y = "150" width = "50" Height = "50" style = "fill: green "/>
<Rect id = "rectangle4" name = "A5" x = "200" Y = "200" width = "50" Height = "50" style = "fill: green "/>
<Rect id = "rectangle5" name = "A6" x = "250" Y = "250" width = "50" Height = "50" style = "fill: green "/>
<Rect id = "rectangle6" name = "A7" x = "300" Y = "300" width = "50" Height = "50" style = "fill: green "/>
<Rect id = "rectangle7" name = "A1" x = "350" Y = "350" width = "50" Height = "50" style = "fill: green "/>
</G>
</SVG>
HTML file: aa.html
<HTML>
<Body>
<Script language = "JavaScript">
Function search (searchvalue)
{
VaR svgmainmapdoc = id1.getsvgdocument ();
Svgobj = svgmainmapdoc. getelementbyid ('g1 ');
Svgobj1 = svgobj. getchildnodes;
For (icount = 1; icount <(svgobj1.length)-1); icount + = 2)
{
If (svgobj1.item (icount). getattribute ("name") = searchvalue)
{
Svgstyle1 = svgobj1.item (icount). getstyle ();
Svgstyle1.setproperty ('fill', 'green ');
}
}
}
Function clearaa ()
{
VaR svgmainmapdoc = id1.getsvgdocument ();
Svgobj = svgmainmapdoc. getelementbyid ('g1 ');
Svgobj1 = svgobj. getchildnodes;
For (icount = 1; icount <(svgobj1.length)-1); icount + = 2)
{
Svgstyle1 = svgobj1.item (icount). getstyle ();
Svgstyle1.setproperty ('fill', 'red ');
}
}
</SCRIPT>
<Embed name = "id1" pluginspage = "http://www.adobe.com/svg/viewer/install/" align = "TOP" src = "/blog/1.svg" Height =" 200px "width =" 400px "type =" image/SVG + XML ">
<Form name = "searchvalue">
<Input name = "value1" size = "12"> <input type = "button" value = "query" name = "search1" onclick = "Search (this. form. value1.value) ">
<Input type = "button" value = "clear" name = "clear" onclick = "clearaa ()">
</Form>
</Body>
</Html>
Open aa.html with IE and enter the query value, such as "A1". Select "query". Two rectangles are highlighted. This is the query result. Clear can eliminate the highlighted display.
The following describes the Query Process. Get the DOM (Document Object Model) of the SVG document through getsvgdocument (), then get the element pointer through getelementbyid and ID ("id1"), and then get its child nodes through getchildnodes, finally, the item (serial number) is used to access its subnodes and determine whether the value of its name attribute is the same as the value to be queried one by one, so as to determine whether to highlight it. Note that the serial number of the subnode starts from 1 and increments by 2.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
