svg动画,渐变,阴影

  • Post author:
  • Post category:其他


SVG 与 Canvas 两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

svg不会失帧,canvas在js中调用方法,svg直接使用标签绘制

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 Canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较:

Canvas SVG

依赖分辨率;

不支持事件处理器;

弱的文本渲染能力;

能够以 .png 或 .jpg 格式保存结果图像;

最适合图像密集型的游戏,其中的许多对象会被频繁重绘。

不依赖分辨率;

支持事件处理器;

最适合带有大型渲染区域的应用程序(比如谷歌地图);

复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快);

不适合游戏应用。

一,.绘制矩形

使用 rect 标签,主要属性:

  • x/y:绘图位置,

  • width/height:矩形长宽,

  • fill:填充颜色,默认黑色,

  • stroke:描边的颜色。

  • stroke-width:描边的宽度。

  • rx/ry:描边的圆角。

二,绘制圆

  • cx/cy:圆绘制的位置,圆心位置

  • r:圆的半径

三,绘制椭圆

  • cx/cy:椭圆绘制的位置,圆心的位置。

  • rx/ry:椭圆的半径。

四,绘制直线,折线多边形

4.1绘制直线

  • x1/y1:起点

  • x2/y2:终点

  • stroke:线条颜色,必须有

4.2,折线

  • points:设置所有折线的点。

  • fill:是否填充,默认填充。

4.3,多边形

方法一:折线从起点回到终点,就是多边形。

<svg width="500" height="500">
	<polyline points="100 300 300 300 300 350 100 300" stroke="red" fill="none"></polyline>
</svg>

方法二:关闭路径。

<svg width="500" height="500">
	<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>

polygon 和 polyline 差不多,只是会自动关闭路径。

1,svg阴影<defs>

svg允许我们定义以后需要重复使用的图形元素,建议把所有需要再次使用的引用元素定义在 <defs> 元素里面。这样做可以增加 SVG 内容在 <defs> 元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 <use> 元素呈现这些元素。

2.filter

filter> 元素作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标 SVG 元素上的 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>

3.feoffset和feblend

feOffset> 将输入图像作为一个整体,通过属性 dx 和属性 dy 的值指定一个偏移量。

<feBlend> 滤镜把两个对象组合在一起,使它们受特定的混合模式控制。类似于图像编辑软件中混合两个图层。

将 <feOffset> 和 <feBlend> 结合在一起,即可创建图形的阴影效果。

<svg>
	<defs>
		<filter id="filter-offset" x="0" y="0" width="200%" height="200%">
			<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
			<feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
		</filter>
	</defs>
	<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-offset)"></rect>
</svg>

4.fegaussianblur

feGaussianBlur 滤镜可以对输入图像进行高斯模糊,并通过属性 stdDeviation 指定偏移的像素数量。(偏移图像可以变的模糊)

5.fecolormatrix

<svg>
	<defs>
		<filter id="filter-matrix" x="0" y="0" width="200%" height="200%">
			<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
			<feColorMatrix result="matrixOut" in="offOut" type="matrix" 
				values="0.2 0 0 0 0
						0 0.2 0 0 0
						0 0	0.2 0 0
						0 0 0 1 0" />
			<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>
			<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
		</filter>
	</defs>
	<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-matrix)"></rect>
</svg>

6.渐变

SVG 渐变主要有两种类型:

  • Linear:线性的。

  • Radial:径向的。


<linearGradient>

元素用来定义线性渐变,用于图形元素的填充或描边

x1 渐变开始的 x 轴位置。
x2 渐变结束的 x 轴位置。
y1 渐变开始的 y 轴位置。
y2 渐变结束的 y 轴位置。

线性渐变可以定义为水平、垂直或径向渐变:

  • 当 y1 和 y2 相等且 x1 和 x2 不同时,将创建水平渐变。

  • 当 x1 和 x2 相等且 y1 和 y2 不同时,将创建垂直渐变。

  • 当 x1 和 x2 不同且 y1 和 y2 不同时,将创建径向渐变。

一个渐变上的颜色坡度,是用

<stop>

元素定义的。

参数 说明
offset 定义渐变开始/停止时的位置。
stop-color 定义渐变开始/停止时使用的颜色。
stop-opacity 定义渐变开始/停止时指定颜色的不透明度。

7.radialGradient—-径向渐变

radialGradient> 元素用来定义径向渐变,以对图形元素进行填充或描边。

参数说明:

参数 说明
cx 定义一个中心点的 x 轴坐标。
cy 定义一个中心点的 y 轴坐标。
r 定义圆的半径。
fx 定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义,就假定它与中心点是同一位置。
fy 定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义,就假定它与中心点是同一位置。
fr 定义径向渐变的焦点的半径。若该属性没有被定义,默认值为 0%。

8.SVG 动画

SVG 中提供三种常用动画标记:

标记 说明
<animate> 动画元素放在形状元素的内部,用来定义一个元素的某个属性如何踩着时间点改变。在指定持续时间里,属性从开始值变成结束值。
<animateTransform> 变动了目标元素上的一个变形属性,从而允许动画控制转换、缩放、旋转或斜切。
<animateMotion> 定义了一个元素如何沿着运动路径进行移动。

SVG 动画使用方式:

  1. 创建动画,告诉动画标记哪个元素需要执行动画

  2. 创建元素,在元素中说明需要执行什么动画

8.1 SVG动画常用属性

属性 作用
attributeName 标识了在一个动画动作环节中,父元素需要被改变的属性名。
from svg 动画发生过程中被修改的属性的初始值。
to svg 动画发生过程中被修改的属性的最终值。
dur 标识了动画的简单持续时间。
fill 在动画结束后,是否还要保持该动画。
remove

:在动画的激活持续时间结束后,动画效果会移除。这是默认值。

freeze

:在动画的激活持续时间结束后,动画效果会“冻结”着,直到文档持续时间结束或动画重新开始。
repeatCount 动画重复执行次数。
repeatDur 动画重复执行总时长。
begin 规定动画开始的时间。
1s

:1s 后开始执行动画。

click

:click 触发事件执行后再执行动画。

click + 2s

:click 触发事件执行后,等两秒再执行动画。
restart 规定元素开始动画后,是否可以被重新开始执行。
always

:动画可以在任何时候被重置。这是默认值。

whenNotActive

:只有在动画没有被激活的时候才能被重置,例如在动画结束之后才能再执行。

never

:在整个 SVG 执行的过程中,元素动画不能被重置。
calcMode 规定每一个动画片段的动画表现。
linear

:匀速动画,这是默认值。

discrete

:非连续动画,没有动画效果瞬间完成。

paced

:规定整个动画效果始终以相同的速度进行,设置 keyTimes 属性无效。

spline

:配合 keySplines 属性来定义各个动画过渡效,自定义动画。
keyTimes 划分动画时间片段。 0~1。
values 划分对应取值片段的值。

8.2 <animate>

利用 <animate> 实现一个点击触发无限往返效果

8.3 <animateTransform>

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

8.4 <animateMotion>

利用 <animateMotion> 实现一个点击触发矩形块沿路径移动的效果



版权声明:本文为weixin_64289861原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。