<u>查看demo</u>
<html>結(jié)構(gòu)
<body>
<div class="svg-wrapper">
<svg height="60" width="200" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="200"/
</svg>
<div class="text">hover</div>
</div>
</body>
Graphics）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。矩形的寬高分別為200px遍坟，60px。
注意開頭的部分xml聲明晴股，與svg的命名空間xmlns愿伴、等部分，主要是考慮兼容性的問題电湘；這些部分在HTML5中基本都可以不用寫了(寫不寫還是自己瞧著辦吧)隔节。
<css>樣式
html,body {
background: #aaa;
height: 100%;
text-align: center;
overflow: hidden;
}
.svg-wrapper {
cursor: pointer;
width: 200px;
height: 60px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.shape {
fill: transparent; ／*--矩形的內(nèi)部填充設(shè)置為透明，只留下邊框--*／
stroke-dasharray: 60px 460px;
stroke-dashoffset: -330px;
stroke-width: 2px;
stroke: #fff;
}
.text {
line-height: 32px;
color: #fff;
font-size: 22px;
position: relative;
top:-45px;
}
／*--設(shè)置動畫屬性--*／
@keyframes draw {
0%{stroke-dasharray: 60px 460px;
stroke-dashoffset: -330px;
stroke-width: 2px;}
100%{stroke-dasharray: 520px;
stroke-dashoffset: 0;
stroke-width: 2px;}
}
.svg-wrapper:hover .shape {
-webkit-animation: draw .5s ease forwards;
animation: draw .5s ease forwards;
}
stroke-dasharray 表示虛線描邊寂呛≡踅耄可選值為：none, <dasharray>, inherit. 其中，none表示不是虛線昧谊；<dasharray>為一個(gè)逗號或空格分隔的數(shù)值列表刽虹。表示各個(gè)虛線端的長度∧匚埽可以是固定的長度值，也可以是百分比值胖缤；inherit表繼承尚镰。
stroke-dashoffset 表示虛線的起始偏移∧睦可選值為：<percentage>, <length>, inherit. 百分比值狗唉，長度值，繼承涡真。
我們現(xiàn)在都試想一下分俯，如果stroke-dasharray和stroke-dashoffset值都很大，超過了描邊路徑的總長度哆料，會怎么樣缸剪？
用中文解釋就是，一根火腿腸12厘米东亦，要在上面畫虛線杏节，虛線間隔有15厘米，如果沒有dashoffset典阵，則火腿腸前面15厘米會被辣椒醬覆蓋奋渔！實(shí)際上只有12厘米，因此壮啊，我們看到的是整個(gè)火腿腸都有辣椒醬〖稻ǎ現(xiàn)在，dashoffset也是15厘米歹啼，也就是虛線要往后偏移15厘米玄渗，結(jié)果减江，辣椒醬要抹在火腿腸之外，也就是火腿腸上什么辣椒醬也沒有捻爷。如果換成上面的直線SVG辈灼，也就是直線看不見了。我們把dashoffset值逐漸變小也榄，則會發(fā)現(xiàn)巡莹，火腿腸上的辣椒醬一點(diǎn)一點(diǎn)出現(xiàn)了，好像辣椒醬從火腿腸根部涂抹上去一樣甜紫。
兩個(gè)屬性都設(shè)置成最大降宅，然后stroke-dashoffset慢慢減小，您會看到直線慢慢出來了囚霸，這就是SVG路徑繪制動畫的原理腰根。
