svg path 动画效果
http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg width="100%" height="320" xmlns="http://www.w3.org/2000/svg">
<!--<path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="transparent"/>-->
<path d="M30 30 L25 30 L20 80 L10 90 L20 100 L20 180 L30 180 " stroke="red" fill="none" stroke-width="3"/>
<!--<path d="M30 20 C 30 20, 10 30, 20 30" stroke="black" fill="transparent"/>-->
<!--<text x="0" y="100" style="fill:red;">
节点1
</text>
-->
</svg>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<title>马儿跑</title>
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<set attributeName="x" attributeType="XML" to="60" begin="3s" />
</text>
</g>
</svg>
<br/>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" from="0" to="160" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
</svg>
<br/>
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="0.1" to="1" repeatCount="1" />
</g>
</svg>
<br/>
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
<animateMotion path="M10,80 L100,120,Z" begin="0s" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="2s" repeatCount="indefinite" />
<animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />
</text>
<path d="M10,80 L100,120,Z" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
<br/>
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
<title>马儿跑</title>
<text font-family="microsoft yahei" font-size="40" y="60" x="100">马
<animateTransform attributeName="transform" type="scale" from="1" to="2" dur="10s" repeatCount="indefinite" additive="sum"/>
<animateTransform attributeName="transform" type="rotate" from="0 100 60" to="360 100 60" dur="10s" fill="freeze" repeatCount="indefinite" additive="sum"/>
</text>
</svg>
</body>
</html>
