SVG动画.animateTransform

1、来自于：SVG之Animation - 前端学习笔记 - SegmentFault.html（https://segmentfault.com/a/1190000009371194）

2、AnimateTransform.html（UTF8）

　　ZC：下面的属性（type="scale" from="1" to="4 2"），实际等价于（type="scale" from="1 1" to="4 2"） ∵scale是2个参数，（from="1"）是省略了一个参数。

　　ZC：同样（type="rotate" from="0" to="45"）也是省略了参数，但是在写图形的属性的时候 rotate是以 SVG的(0,0)坐标为中心的，这里同样是这样的...（可以观察第二个矩形的变化）

　　2.1、测试代码

<!DOCTYPE html><html>
<head><meta charset="UTF-8">
</head><body><svg width="800" height="600" viewBox="-400 -300 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><!--矩形中心 == SVG的(0,0)点--><rect x="-10" y="-10" width="20" height="20" style="fill: #ff9; stroke: black;"><animateTransform id="a1" attributeName="transform" attributeType="XML" type="scale" from="1" to="4 2" additive="sum" begin="0s" dur="4s" fill="freeze"></animateTransform><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="45" additive="sum" begin="a1.end" dur="4s" fill="freeze"></animateTransform></rect><!--矩形中心 != SVG的(0,0)点--><rect x="20" y="20" width="20" height="20" style="fill: #ff9; stroke: black;"><animateTransform id="a1" attributeName="transform" attributeType="XML" type="scale" from="1" to="4 2" additive="sum" begin="0s" dur="4s" fill="freeze"></animateTransform><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="45" additive="sum" begin="a1.end" dur="4s" fill="freeze"></animateTransform></rect></svg></body>
</html>

3、

4、

5、

转载于:https://www.cnblogs.com/H5UI/p/8405789.html

SVG动画.animateTransform相关推荐

svg动画制作_制作第一个SVG动画
svg动画制作 Story of a designer trying to code animations instead of asking a dev to figure it out. 一位设计 ...
HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...
svg 动画_svg 动画介绍（一）
今天讲svg的动画属性 animate.animateTransform.animateMotion(第一节) SVG 动画元素 animate.animateTransform.animateMot ...
基于VUE的SVG动画处理（一）
基于VUE的SVG动画处理(一) 提示:涉及vue.photoshop.svg动画一.创建SVG文件方法一:使用photoshop绘制所需接线图,导出svg格式. 第一种:快速导出SVG编辑-&g ...
关于如何制作svg动画。
今日发现有同事做一个动画,是把svg放在div里面,然后给div加动画,来做一个loading的效果. 然后这样的话,在重复使用上,应用起来会很麻烦,所以研究了一下在svg里面加动画效果. 1.ani ...
svg 动画 ------- svg的内容如何围绕自身旋转
svg 动画 ------- svg的内容如何围绕自身旋转前些天研究svg动画这里就不放图了就一个齿轮要一直旋转我先直接 <animateTransform attributeType= ...
https://isux.tencent.com/svg-animate.html(svg动画)
初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥.如今SVG已经在前端各个领域都有所作为,无论是项目里的应用还是demo都所 ...
svg动画制作_制作动画SVG横幅
svg动画制作 I've been reading David Walsh's blog for years. The tips and tutorials he shares have helped ...
SVG动画编程及其应用
SVG动画编程及其应用 2008.03.16 张杰,刘晓平来源:SVG中国(ChinaSVG.COM) 本文分析了SVG图形技术.SVG动画模型与DOM.SMIL.SIMLANIM的关系以及SVG简 ...

SVG动画.animateTransform

SVG动画.animateTransform相关推荐

最新文章

热门文章