svg實現路徑自己動態繪製的功能

螞蟻小編發表於2017-02-01
SVG
分享一段程式碼例項，它實現了路徑自己動態繪製的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">  
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}
 
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style> 
</head> 
<body> 
<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="340px" height="333px"
  viewBox="0 0 340 333"
  enable-background="new 0 0 340 333" xml:space="preserve">
 
  <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10"
    d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27
    s66,4,58,32
    s-5,44,18,57
    s22,46,0,45
    s-54-40-68-16
    s-40,88-83,48
    s11-61-11-80
    s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
</body> 
</html>

相關文章