Using SVG to make dynamic tooltip_javascript skills

Last night saw the use of SVG how to make a dynamic ToolTip, so today on a whim to learn to do it, so also successfully made out, but also understand the principle, a lot of harvest Ah! The next step is to learn more about SVG, which is a good thing.

This also attention to some of the usual tangled details should be done, such as:

<article>
<section id= "Sound1" >
</section>
<section id= "Sound2" >
</ Section>
</article>

The article label length is 600px,section 300px, then set to Display:inline-block, and then the following effect:

Originally, according to the common sense, should be the head level arrangement, this is because Display:inline-block, the article label and section label between blank rendering space, space booth, so will cause the picture is not the same row, The solution is to add the following CSS code to the article tag and section label:

article{ 
width:600px;
margin:200px;
font-size:0;
}
Article section{ 
display:inline-block;
width:300px;
font-size:14px;
position:relative;
}

So the blanks were removed!

In addition, for SVG web images, we can modify them so that the style of the image can be modified, and its format is as follows (for example):

<?xml version= "1.0" encoding= "Utf-8"?>
<!--generator:adobe Illustrator 17.0.0, SVG Export Plug-In. SVG version:6.00 build 0)-->
<! DOCTYPE svg public "-//W3C//DTD svg 1.1//en" "Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg Version= "1.1" id= "layer_1" xmlns= "Http://www.w3.org/2000/svg" xmlns:xlink= "Http://www.w3.org/1999/xlink" x= "0px" y= "0px"
width= "600px" height= "300px" viewbox= "0 0" enable-background= "new 0 0" xml:space= "preserve" >
<polygon points= "89.571,6.648 513.333,6.648 590.25,75.342 553.002,215.306 313.065,273.358 300,293.352 288.876,272.71 
48.936,215.306 9.75,75.342 "/>
</svg>

So we can not introduce it into the HTML file, if there are many such SVG images, it is cumbersome to modify!

So using AJAX to load this picture:

HTML dom:<svg data-src= "Bubble1.svg" width= "280" height= "140" ></svg>

Question two: How do we introduce SVG images, it is impossible to introduce the entire SVG, not easy to modify the editing
Tip Two: Use JS to load

$ (' svg[data-src] '). Each (function (index, SVG) {
var src = $ (SVG). Data (' src ');//data is used to get the Data-* property's path
$.ajax ({
url:src,
dataType: ' xml ',
success:function (content) {
var doc = content.documentelement;
$ (DOC). attr ({
width: $ (SVG). attr (' width '),
Height: $ (SVG). attr (' height ')
});
$ (SVG). After (DOC). Remove ();}})
;

There's also a good way to animate the strokes of a picture, just for SVG images:

Using Stroke-dasharray (Virtual line drawing edge, you can constantly try to adjust to the size, complete the effect of the entire stroke) stroke-dashoffset (dashed interval, tuned to the entire SVG without stroke effect), Then use transition to implement this animation

The final effect (figure, no online demo, no animation effect, but the following code directly copied, and then download two SVG pictures and Avatar can be used)

The code is as follows:

<! DOCTYPE html>  

The above is the entire contents of this article, I hope you can enjoy.