svg实现路径自己动态绘制的功能

2017-2-1 13:08| 作者: 蚂蚁小编| 查看: 798| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了路径自己动态绘制的功能。

代码实例如下:

[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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部