SVG 动画 - 前端CSS - SegmentFault 思否

SVG 动画

主要内容
  • SVG 是什么?
  • SVG 的一些常用用途
  • SVG 的基本结构

  • CSS 结合 SVG 生成动画

    • 圆环动画
    • logo 描边动画
  • SVG 的动画元素

SVG 是什么？

SVG ，可缩放矢量图形（Scalable Vector Graphics），是一种用来描述二维矢量图形的 XML 标记语言。 简单地说，SVG 面向图形，HTML 面向文本。

SVG 特点

  1. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  2. SVG 是矢量的，可伸缩的，适用多种分辨率。
  3. SVG 是开放的标准，本质是纯粹的 XML ，可以被非常多的工具读取和修改。
  4. 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"/>

clipboard.png

2. 圆形（circle）

<circle cx="75" cy="75" r="60"/>

clipboard.png

3. 椭圆（ellipse）

<ellipse cx="75" cy="75" rx="30" ry="20"/>

clipboard.png

4. 线条（line）

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="3"/>

clipboard.png

5. 折线（polyline）

<polyline points="60 60, 70 120, 80 130, 70 70" style="fill: none;stroke-width: 2;stroke: black;"/>

clipboard.png

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;"/>

clipboard.png

7. 路径（point）

<path d="M 20 230 Q 40 205, 50 230 T 90230" style="fill: none;stroke: black"/>

clipboard.png

路径绘制命令

SVG常用元素还有<g>组合，常用属性fill填充，stroke线条颜色，stroke-width线条粗细等等，具体参考MDN文档。
SVG 元素参考
SVG 属性参考

CSS 结合 SVG 属性生成动画

stroke-dasharray可控制用来描边的点划线的图案范式。
stroke-dashoffset 属性指定了dash模式到路径开始的距离

圆环动画

画圆环的动画效果，可用于提示加载百分比，倒计时等场景。
https://codepen.io/wishingtre...

EDIT ON[](https://codepen.io/wishingtree/pen/wYdNMz "Edit on CodePen")

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head><body>  <svg width="440" height="440" viewbox="0 0 440 440" xmlns="http://www.w3.org/2000/svg">    <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle>    <circle class="circle" cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)"></circle></svg></body></html>
.circle {  animation: circle 5s linear;}@keyframes circle {  from {    stroke-dasharray: 0 1069;  }  to {     stroke-dasharray: 1069 0;  }}

Document

[](https://codepen.io/wishingtree)

This Pen is owned by 素月拾掇 on CodePen.

See more by @wishingtree on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Resources

  • 1×
  • 0.5×
  • 0.25×

Rerun

logo 描边动画

logo描边动画点击预览
logo描边动画2][7]

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

原网址: 访问
创建于: 2020-03-01 17:31:44
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论