SVG 动画

69次阅读

共计 1978 个字符,预计需要花费 5 分钟才能阅读完成。

SVG 动画
主要内容

SVG 是什么?
SVG 的一些常用用途
SVG 的基本结构

CSS 结合 SVG 生成动画

圆环动画
logo 描边动画

SVG 的动画元素

SVG 是什么?
SVG,可缩放矢量图形(Scalable Vector Graphics),是一种用来描述二维矢量图形的 XML 标记语言。简单地说,SVG 面向图形,HTML 面向文本。
SVG 特点

SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是矢量的,可伸缩的,适用多种分辨率。
SVG 是开放的标准,本质是纯粹的 XML,可以被非常多的工具读取和修改。
SVG 图像中的文本是可选的,同时也是可搜索的。

SVG 兼容性
IE9+,主流环境基本都能支持。具体参见
SVG 的一些常用用途

制作 iconfont

作为图片文件 img src 属性引用,css background-image 引用。
SVG 作为图像引用时,大多数浏览器不会加载 SVG 自身引用的文件 (其他图像,外部脚本,字体文件等),依据浏览器的安全策略,SVG 中定义的脚本也可能不会执行。

作为应用程序 SVG 文件也可以作为 <object> 元素的 data 属性引入 HTML 中。注意,MIME type 必须是 image/svg+xml。
<object data=”image.svg” type=”image/svg+xml”>

</object>

混合文档可以直接将 <svg> 嵌入到 XHTML 或者 HTML5 文档中。嵌入到 XHTML 需要为 <svg> 指定命名空间(xmlns),嵌入到 HTML5 则可以省略,解析器会自动识别 <svg>。在 HTML 内容中应用 SVG 效果

SVG 的基本结构
SVG 跟标签
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ width=”1024px” height=”1024px”>
</svg>
SVG 基本形状
1. 矩形(rect)
<rect x=”60″ y=”10″ rx=”20″ ry=”40″ width=”100″ height=”100″/>

2. 圆形(circle)
<circle cx=”75″ cy=”75″ r=”60″/>

3. 椭圆(ellipse)
<ellipse cx=”75″ cy=”75″ rx=”30″ ry=”20″/>

4. 线条(line)
<line x1=”10″ x2=”50″ y1=”110″ y2=”150″ stroke=”black” stroke-width=”3″/>

5. 折线(polyline)
<polyline points=”60 60, 70 120, 80 130, 70 70″ style=”fill: none;stroke-width: 2;stroke: black;”/>

6. 多边形(polygon)
polygon 和折线很像,它们都是由连接一组点集的直线构成。不同的是,polygon 的路径在最后一个点处自动回到第一个点。
<polygon points=”50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180″ style=”fill: none;stroke: black;”/>

7. 路径(point)
<path d=”M 20 230 Q 40 205, 50 230 T 90230″ style=”fill: none;stroke: black”/>

路径绘制命令
SVG 常用元素还有 <g> 组合,常用属性 fill 填充,stroke 线条颜色,stroke-width 线条粗细等等,具体参考 MDN 文档。SVG 元素参考 SVG 属性参考
CSS 结合 SVG 属性生成动画
stroke-dasharray 可控制用来描边的点划线的图案范式。stroke-dashoffset 属性指定了 dash 模式到路径开始的距离
圆环动画
画圆环的动画效果,可用于提示加载百分比,倒计时等场景。https://codepen.io/wishingtre…
logo 描边动画
webank 描边动画
SVG 的动画元素
兼容性:ie 死都不支持,移动端友好。具体参见

1.set
set 元素不能产生动画效果,可以实现基本的延迟功能。就是指:可以在特定时间之后修改某个属性值(包括本身的 XML 属性和 CSS 属性值)。
2.animate
attributeName 变动的属性的属性名。from 变动的初始值。to 变动的终值。dur 动画的持续时间。举个栗子形状补间动画
3.animateTransform
attributeName 固定为 transform,可针对 transform 的相关属性生成动画,不详细介绍了。
4.animateMotion(线性路径动画)
animateMotion 元素可以让 SVG 各种图形沿着特定的 path 路径运动。地球围绕太阳旋转贴合路径弧度运动
SVG 动画库:1.SVG-Morpheus 使用参考演示参考 2.snap.svg

正文完
 0