SVG 学习与基础2

最新推荐文章于 2024-05-25 09:35:09 发布

寒天不敲码

最新推荐文章于 2024-05-25 09:35:09 发布

阅读量241

点赞数

文章标签：学习 css 动画

本文链接：https://blog.csdn.net/weixin_65696478/article/details/128418986

版权

SVG动画

<animate>:动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时间点改变。在指定持续时间里，属性从开始值变成结束值。

属性	作用
attributeName	标识了在一个动画动作环节中，父元素需要被改变的属性名。
from	svg 动画发生过程中被修改的属性的初始值。
to	svg 动画发生过程中被修改的属性的最终值
dur	标识了动画的简单持续时间。
fill	在动画结束后，是否还要保持该动画。
repeatCount	动画重复执行次数。
repeatDur	动画重复执行总时长
begin	规定动画开始的时间
restart	规定元素开始动画后，是否可以被重新开始执行
calcMode	规定每一个动画片段的动画表现。
keyTimes	划分动画时间片段。

半径从50到100经三秒放大的圆

<svg width="500" height="500">
	<circle id="myCircle" cx="100" cy="100" r="50" fill="blue"></circle>
	<animate attributeName="r" from="50" to="100" dur="3s" fill="freeze" xlink:href="#myCircle"></animate>
</svg>

<animateTransform >：实现一个点击触发水平移动效果。

<svg width="500" height="500">
	<circle cx="100" cy="100" r="50" fill="blue">
		<animateTransform 
				attributeName="transform" 
				type="translate" 
				from="0 0" 
				to="200 0" 
				dur="2s" 
				begin="click" 
				fill="freeze" />
	</circle>
</svg>

实现一个点击触发图形旋转效果。

<svg width="500" height="500">
  <rect x="100" y="100" width="200" height="100" fill="blue">
    <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 100 100"
        to="45 100 100"
        dur="1s"
        begin="click"
        fill="freeze" />
  </rect>
</svg>

实现一个点击触发矩形块沿路径移动的效果。

<svg width="500" height="500" viewBox="-100 -100 500 500">
	<path 
			d="M0 0 C0 300 300 300 300 0" 
			stroke="red" 
			stroke-width="2" 
			fill="none" />
	<rect x="0" y="0" width="40" height="40" fill="lightgreen">
		<animateMotion 
				path="M0 0 C0 300 300 300 300 0" 
				dur="3s" 
				begin="click" 
				fill="freeze" 
				rotate="auto" />
	</rect>
</svg>