SVG basics and operations on SVG and svgdom using Javascript DOM

SVG basics and operations on SVG and svgdom using Javascript DOM

SVG

• Resolution independent
• Event processor supported
• Most suitable for applications with large rendering areas (such as Google Maps)
• High complexity slows down the rendering speed (any application that excessively uses DOM is not fast)
• Not suitable for game applications

Canvas

• Dependency resolution
• Event processor not supported
• Weak text rendering capability
• The result image can be saved in. png or. jpg format.
• Most Suitable for image-intensive games, many of which are frequently repainted

This is probably the case. If you want to use SVG, you should consider whether you should adopt Canvas and know that not all browsers support it. IE8 or below does not support SVG, in addition, modern browsers include Internet Explorer 9 and Internet Explorer 9. Internet Explorer has its own solution: VML. You can search for related materials by yourself. You can also install the plug-in to support SVG, such as the svg viewer produced by adobe.

Use SVG in HTML

For more information about the basics, see the W3SCHOOL Tutorial: http://www.w3school.com.cn/svg/index.asp.

Special attention should be paid to the SVG in HTML section. It introduces how to use SVG in HTML, which may be troublesome. Fortunately, in a browser that supports HTML5, you can directly create SVG labels:

This method is calledInline SVGWith this inline JavaScript method, it is much easier to control.

Group element <g>

The g element can group multiple elements to make them more semantic and facilitate unified processing of elements in the group, such as styles and animations.

<g>    <rect x="10" y="10" width="40" height="40" ry="10"/>    <rect x="80" y="80" width="40" height="40" ry="10"/>    <rect x="150" y="150" width="40" height="40" ry="10"/></g>

Solve text layout problems

In SVG, Text Formatting is a headache. You cannot put text in a "rectangle container" (such as DIV) as easily as HTML, because the labels are closed (close them in the start tag ). The simple method is to set the text and the rectangle to close coordinates to make them look "together" (is this the farthest distance in the world ?) :

<rect x="10" y="10" width="100" height="40" style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/><text x="35" y="35" font-size="16" style="fill:rgb(0,0,0);">text</text>;

 

Obviously, this method is difficult to manage. When I want to change a position, I have to adjust the positions of the rectangle and text. Now there are only two elements, that is a nightmare. The g element can help us solve this problem.

Put them in a g element first, so that the positions of all elements in the element are relative to the g element. By changing the position of the g element, you can adjust the positions of the entire group. However, transform is required to be valid, instead of x and y:

<g transform="translate(50,50)">    <rect x="0" y="0" width="100" height="40" style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>    <text x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">text</text>;</g>

Now the x and Y axes of the rectangle and text are relative to the position of g,translate(50,50)It means x = "50", y = "50". Should this be easy to understand?

Use Javascript DOM to control SVG

An SVG container already exists on the page with an XML namespacehttp://www.w3.org/2000/svgAnd an idmain:

<svg xmlns="http://www.w3.org/2000/svg" id="main" version="1.1" height="200"></svg>    

Next we will use a series of DOM methods to add a rectangle to the container:

• Passdocument.getElementByIdAccordingElement IDComeObtainThis container object
• Usedocument.createElementNSCreateOne belthttp://www.w3.org/2000/svgRectangular object of the namespace
• Useelement.setAttributeSetAttribute
• Useelement.appendChildPut itAddTo the container

Code:

<script>    var main = document.getElementById( "main" );    var rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );    rect.setAttribute( "width", 100 );    rect.setAttribute( "height", 30 );    rect.setAttribute( "style", "fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" );    main.appendChild( rect );</script>

Set text

TextContent attributesYou can obtain and set the text of the text element:

// SVG <text id = "text" x = "25" y = "25" font-size = "16" style = "fill: rgb (0, 0 ); "> foo </text>; // JS <script> var text = document. getElementById ("text"); console. log (text. textContent); // foo text. textContent = "Hello world! "; // Reset the text </script>

Obtains the height and coordinates of an element.

GetBBox MethodYou can obtain the height and coordinates of all elements:

// SVG<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;// JS<script>    var text = document.getElementById( "text" );    console.log( text.getBBox() ); // {height: 16, width: 32, y: 11, x: 25} </script>

Event Processing

SVG can also add custom events for elements like HTML.
UseOn + event nameProperty listening:

// SVG <text id = "text" x = "25" y = "25" font-size = "16" style = "fill: rgb (0, 0 ); "> foo </text>; // JS <script> var text = document. getElementById ("text"); // The text is displayed when you click the text. onclick = function () {alert (this. textContent) ;}; </script>

You can also useelement.addEventListenerMethod listening:

// SVG <text id = "text" x = "25" y = "25" font-size = "16" style = "fill: rgb (0, 0 ); "> foo </text>; // JS <script> var text = document. getElementById ("text"); // when you click the text, its content is displayed. // The event name is not preceded by on text. addEventListener ('click', function () {alert (this. textContent) ;}); </script>

What are the differences between the two methods?On + event nameAn attribute can only add one processing method for the same event. setting this attribute overwrites the previous method.element.addEventListenerMultiple uses do not overwrite the previous one, but overlay the original events.