HTML day 06

1.SVG阴影

1.1<defs>：在<svg></svg>里写，允许我们定义以后需要重复使用的图形元素。

1.2filter

<filter> 元素作用是作为原子滤镜操作的容器

<svg width="500" height="100">
	<defs>
		<filter id="blurFilter" y="-5" height="40">
			<feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur>
		</filter>
	</defs>
	<ellipse cx="155" cy="60" rx="25" ry="15" stroke="none" fill="blue" filter="url(#blurFilter)"></ellipse>
</svg>

2.SVG 渐变

2.1Linear：线性的。

2.2Radial：径向的。

<svg>
	<defs>
		<linearGradient id="line-hor" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" stop-color="yellow" stop-opacity="1" />
			<stop offset="100%" stop-color="red" stop-opacity="1" />
		</linearGradient>
	</defs>
	<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#line-hor)"></ellipse>
</svg>

x1:渐变开始x轴位置

x2：渐变结束的 x 轴位置

y1:渐变开始的 y 轴位置。

y2:渐变结束的 y 轴位置。

3.SVG 动画

3.1animate:用来定义一个元素的某个属性如何踩着时间点改变

animateTransform:变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。

animateMotion:定义了一个元素如何沿着运动路径进行移动。

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

3.2SVG动画常用属性

attributeName :标识了在一个动画动作环节中，父元素需要被改变的属性名

from: svg 动画发生过程中被修改的属性的初始值。

to ::svg 动画发生过程中被修改的属性的最终值。

dur :标识了动画的简单持续时间。

fill :在动画结束后，是否还要保持该动画(remove：在动画的激活持续时间结束后，动画效果会移除。这是默认值。 freeze：在动画的激活持续时间结束后，动画效果会“冻结”着，直到文档持续时间结束或动画重新开始 )

repeatCount: 动画重复执行次数。

begin:规定动画开始的时间。(1s：1s 后开始执行动画。 click：click 触发事件执行后再执行动画。 click + 2s：click 触发事件执行后，等两秒再执行动画 )

restart :规定元素开始动画后，是否可以被重新开始执行。(always：动画可以在任何时候被重置。这是默认值。 whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后才能再执行。 never：在整个 SVG 执行的过程中，元素动画不能被重置。 )

calcMode: 规定每一个动画片段的动画表现。(linear：匀速动画，这是默认值。 discrete：非连续动画，没有动画效果瞬间完成。 paced：规定整个动画效果始终以相同的速度进行，设置 keyTimes 属性无效。 spline：配合 keySplines 属性来定义各个动画过渡效，自定义动画。 )

keyTimes :规定每一个动画片段的动画表现。(linear：匀速动画，这是默认值。 discrete：非连续动画，没有动画效果瞬间完成。 paced：规定整个动画效果始终以相同的速度进行，设置 keyTimes 属性无效。 spline：配合 keySplines 属性来定义各个动画过渡效，自定义动画。 )

keyTimes: 划分动画时间片段(0~1。 )

values:划分对应取值片段的值。

<svg width="500" height="500">
	<circle cx="100" cy="100" r="50" fill="blue">
		<animate id="toRight" 
				attributeName="cx" 
				from="100" 
				to="300" 
				dur="1s" 
				begin="click;toLeft.end" />
		<animate id="toLeft" 
				attributeName="cx" 
				from="300" 
				to="100" 
				dur="1s" 
				begin="toRight.end" />
	</circle>
</svg>