ToolTip (using SVG to create a dynamic dialog box)

Last night to see how to make a dynamic with SVG, the ToolTip, so today on a whim to learn to do, so also succeeded in doing it, but also understand the principles, a lot of harvest Ah! The next step is to learn more about SVG, which is a good thing.

It also notes some of the usual tangled details of how to do it, such as:

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

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

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

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

So the blanks are removed!

In addition, for the SVG web image, we can modify it so that its image style can be modified, its format is probably 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 of these SVG images, the change is very troublesome!

So using AJAX to load this image:

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

Question two: How to 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 used to get the path to the Data-* property
$.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 is also a picture of the stroke animation effect, here is a good way, only for the SVG image:

With Stroke-dasharray (a dashed line, you can constantly try to adjust it to fit the size and finish the entire stroke) Stroke-dashoffset (the dashed interval, which is the effect of the entire SVG without a stroke), Then use transition to implement this animation

The final effect (, there is no online demo, the animation effect does not come out, but the following code to copy directly, then to download two SVG pictures and Avatar can be used)

The code is as follows:

<! DOCTYPE html>
<title>tooltip Chat dialog box production </title>
<meta charset= "Utf-8"/>
<meta name= "keywords" content= ""/>
<meta name= "description" content= ""/>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<style type= "Text/css" >
h1{
color:red;
font-size:18px;
}
article{
width:600px;
margin:200px;
font-size:0;
}
Article section{
/* Problem one: For Display:inline-block, there will be two sections that cannot be arranged side-by, because using this property renders the space between the article and the section blank, so you cannot side-by
/* Tip One: parent element set font-size:0; clear Blank */
Display:inline-block;
width:300px;
font-size:14px;
position:relative;
}
. text-center{
Text-align:center;
}
#sound1, #sound2 {
Cursor:pointer;
}
#sound1 img, #sound2 img{
width:100px;
height:100px;
border-radius:100%;
}
. sound_1,.sound_2{
Position:absolute;
top:-104px;
width:200px;
height:100px;
Box-sizing:border-box;
Opacity:1;
}
. sound_2{
padding:28px;
}
. sound_1{
padding:25px 68px 25px 30px;
Left: -150px;
Top: -134px;
width:280px;
height:140px;
}
. Sound_1 svg,. Sound_2 svg{
Position:absolute;
top:0;
left:0;
}
. sound_1 P,.sound_2 p{
position:relative;
margin:0;
Color: #444;
font-size:12px;
}
. sound_1 svg path,. sound_2 svg polygon{
Fill: #fff;/* Fill Color */
stroke:red;/* Color of stroke */
Width of stroke-width:6px;/* edge */
}
. sound_1 svg #path1 {
Transform:scale (0, 0);
Transform-origin:center;
opacity:0;
Transition-duration:. 3s;
transition-delay:0;
}
. sound_1 svg #path2 {
Transform:scale (0, 0);
Transform-origin:center;
opacity:0;
Transition-duration:. 3s;
Transition-delay:. 1s;
}
. sound_1 svg #path3 {
Transform:scale (0, 0);
Transform-origin:center;
opacity:0;
Transition-duration:. 3s;
Transition-delay:. 2s;
}
. sound_1 svg #path4 {
Transform:scale (0, 0);
Transform-origin:center;
opacity:0;
Transition-duration:. 3s;
Transition-delay:. 25s;
}
. sound_1 P {
Transition:. 2s. 35s;
opacity:0;
Transform:translate (0, -10px);
}
#sound1: hover. Sound_1 svg #path1, #sound1: hover. Sound_1 svg #path2, #sound1: hover. Sound_1 svg #path3, #sound1: hover. Sound_1 svg #path4 {
Transform:scale (1, 1);
Opacity:1;
transition-delay:0;
}
#sound1: hover. Sound_1 p{
Opacity:1;
Transform:translate (0, 0);
}
/* Question three: for the picture's stroke animation effect, here is a good way, only for the SVG image */
/* Tip Three: Use Stroke-dasharray (dashed lines, you can keep trying to adjust to size, to achieve the effect of stroke) stroke-dashoffset (dotted interval, to the entire SVG no stroke effect), Then use transition to implement this animation */
. sound_2 svg polygon{
stroke-dasharray:1500;
stroke-dashoffset:1500;
fill-opacity:0;
Transition:. 6s;
}
. sound_2 P {
Transition:. 4s;
Transform:scale (-0.5);
opacity:0;
Transform:translate (0, -10px);
}
#sound2: hover. Sound_2 svg polygon{
stroke-dashoffset:0;
Fill-opacity:1;
}
#sound2: hover. sound_2 p {
Transform:scale (0);
Opacity:1;
Transform:translate (0, 0);
}
</style>
<body>

<article>
<section id= "Sound1" >
<div class= "Text-center" ></div>
<p class= "Text-center" > Korea is too </p>
<div class= "Sound_1" >
<svg data-src= "Bubble1.svg" width= "280" height= "></svg>"
<p> heard Uniqlo's fitting room has been fully upgraded, space size expansion of one times, fine decoration, and all around have mirrors, convenient without dead-angle video, to try not, beautiful! </p>
</div>
</section>
<section id= "Sound2" >
<div class= "Text-center" > </div>
<p class= "Text-center" > Uniqlo beauty </p>
<div class= "Sound_2" >
<svg data-src= "Bubble2.svg" width= "height=" ></svg>
<p> sounds exciting, that's it, handsome, ready guy, go!. </p>
</div>
</section>
</article>

<script type= "Text/javascript" >
$ (document). Ready (function () {
Question two: How to 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 used to get the path to the Data-* property
$.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 ();
}
})
});
})
</script>
</body>

ToolTip (using SVG to create a dynamic dialog box)