svg animate 动画

<svg> //相当于一个让舞台是svg能展示效果的区域
viewBox=”280,80,20,20″ //起点x轴为280，y轴80，宽20，高20的区域在svg中截图并且铺满svg

<svg width=”400″ height=”300″ viewBox=”0,0,40,30″ style=”border:1px solid #cd0000;”></svg>
viewport与preserveaspectratio
http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/
http://www.drawsvg.org/ svg在线绘图
http://editor.method.ac/

svg css属性
fill: orange //填充颜色
stroke: black //边框颜色
stroke-width: 3 //边框大小
stroke-dasharray: 10, 5 //虚线间隔
stroke-opacity: //表示描边透明度

stroke-linecap //表示描边端点表现方式stroke-linejoin
stroke-linejoin //表示描边转角的表现方式
stroke-miterlimit
http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%https://css-tricks.com/guide-svg-animations-smil/84/
svg animate简单动画

<set attributeName=”x” attributeType=”XML” to=”60″ begin=”3s” />
3秒后 沿X轴移动到 60px位置

<set> //可以在特定时间之后修改某个属性值（也可以是CSS属性值）
<animateColor> //废弃<animate>可以实现它的效果
<animateTransform> //跟css的Transform一样
<animateMotion> //让SVG各种图形沿着特定的path路径运动
<animate>
—————————————————————–

<set> 例子：
<text font-family=”microsoft yahei” font-size=”120″ y=”160″ x=”160″>
马
<set attributeName=”x” attributeType=”XML” to=”60″ begin=”3s” /> //3秒<text>X值设置为60
</text>

—————————————————————–

<animateTransform> 例子：

<rect>
<animateTransform
attributeType=”xml” //开始声明xml类型，如果不声明svg会自动匹配（可选）
attributeName=”transform” type=”rotate” //声明动画属性是rotate
from=”0″ to=”90″ //0deg到90deg
begin=”0″ dur=”5s” //过渡时间为5s
fill=”freeze”
/>
</rect>
——————————————————————
<animateMotion> 例子：
<text font-family=”microsoft yahei” font-size=”40″ x=”0″ y=”0″ fill=”#cd0000″>马
<animateMotion path=”M10,80 q100,120 120,20 q140,-50 160,0″ begin=”0s” dur=”3s” rotate=”auto” repeatCount=”indefinite”/>
</text>

<path d=”M10,80 q100,120 120,20 q140,-50 160,0″ stroke=”#cd0000″ stroke-width=”2″ fill=”none” />
—————————————————————-

<animate> 效果组合例子：

<svg width=”320″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<text font-family=”microsoft yahei” font-size=”120″ y=”160″ x=”160″>马
<animate attributeName=”x” from=”160″ to=”60″ begin=”0s” dur=”3s” repeatCount=”indefinite” />
<animate attributeName=”opacity” from=”1″ to=”0″ begin=”0s” dur=”3s” repeatCount=”indefinite” />
</text>
</svg>
—————————————————————
animate 属性

attributeName = //要变化的元素属性名称
attributeType = “CSS | XML | auto” //用来表明attributeName属性值的列表，要写css还是写svg,例如css是style=”height:100px”,XML是height=100
from = //
to = //
begin= //
dur= //
calcMode= //
repeatCount= // 动画执行次数
repeatDur= //重复动画的总时间
fill= // 动画结束后是否保持结束后的状态

svg

https://css-tricks.com/guide-svg-animations-smil/

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506262114.html