canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和 webGL 毕竟是偏向底层的绘制引擎,某些场景使用起来还是过于繁琐的,不分场合一律使用锤子解决的行为不值得提倡。svg 在解决排版,图标,相关动画还是非常高效的,而且 svg 还是矢量图形,高清还原各种屏幕尺寸的设计简直就是神器。

svg 基础知识不再讲解,结合svg特点和应用场景,主要介绍如下几方面的内容

  • svg sprite
  • css background-image 插入svg
  • 文字路径
  • 路径动画

SVG sprite

SVG sprite 之于 font-face 的优势就是矢量图的抗锯齿效果,再也不需要为适配高清屏而操心。使用方式就是 svg 标签结合 symbol元素即可,其中 svg 是容器,而symbol 则是组件模板。怎么把svg组件显示出来呢?使用 use 元素指向组件的id即可,如下所示:

<svg>
<symbol id="ok">
<!-- svg元素或组合 -->
</symbol>
<!-- ... -->
</svg> <use href="#ok"/>

当然网上有很多工具可以帮我们把图标自动sprite,比如:iconfotgulp-svg-symbols

在css中插入svg

SVG 添加到网页中有多种方法,最常见的是:

  1. 在 HTML 中内联
  2. objectiframeembed 标签插入
  3. img 标签
  4. CSS background-image 属性

html 内联方式

<svg>
<title>line</title>
<line x1="20" y1="20" x2="100" y2="100">
</svg>

使用 object、iframe 或 embed 标签插入

<object data="flag.svg" type="image/svg+xml"></object>
<iframe src="flag.svg" frameborder="0"></iframe>
<embed src="flag.svg" type="" />

使用img标签插入

<img src="flag.svg"/>

现在重点介绍一下使用 css background属性插入的方式;既可以使用图片路径也可以使用 base64 格式的data URI 方式

.svg-bg {
background-image: url("./bg.svg");
}
.svg-background {
background-image: url("data:image/svg+xml;<DATA>");
}

我认为使用 background base64 引入svg是最具灵活性的一种方式,还可以加入svg动画,不需要额外加载图标,只需引入css即可。同时跟普通图片相比它又有着抗锯齿的优势,因此元素尺寸随意调整不担心失真。比如下面使用background data URI 引入的加载动画css:

<style>
.loading{
width: 50px;
height: 50px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M10 40a30 30 0 1130 30' stroke-width='4' stroke='hsl(220,90%,60%)' fill='none'%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1.4s' type='rotate' from='0 40 40' to='360 40 40' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E")
no-repeat center / cover;
}
</style> <body>
<div class="loading"></div>
</body>

文字路径

svg 除了绘制图形,插入文字也是很方便的,方式也简单,使用 text 元素包裹文本内容即可

<text fill="hsla(260,80%,50%,1)" x="10" y="40" font-size="30"> I Love SVG </text>

还有一种很实用的效果就是文字路径,也就是文字按照定义好的 path 进行排列显示,这需要使用到另一个标签 textPath。实现方式:首先定义一个path元素(这里使用三次贝塞尔曲线),然后 textPath元素使用 xlink:href 属性引入path,最后再用 text标签包裹。

<g>
<title> 文字路径 </title>
<path id="path" d="M 10 100 C 100 0 150 300 250 100" fill="none" stroke="#555"/>
<text x="10" y="100" stroke="hsl(280,100%,50%)">
<textPath xlink:href="#path">I Love SVG I Love SVG I Love SVG</textPath>
</text>
</g>

文字路径
I Love SVG

I Love SVG I Love SVG I Love SVG

svg路径动画

svg动画既可以使用 css3 相关属性实现,也可以使用自己独有的api实现。svg方式主要用以下标签:

  • animate:基础动画元素,实现单属性的动画过渡效果

  • animateTransform: 实现transform变换动画效果

  • animateMotion:路径动画效果

这里只介绍路径动画,基础动画和变换动画与css动画相似,就不再介绍。来看一个基于 css3 的 animation 实现百分比加载的动画。这里用到了两个关键属性:

  • stroke-dasharray:设置线条断开为虚线,数值越大,线就越长

  • stroke-dashoffset:设置线条的偏移,设置后,线段就会偏移相应的值,实现线条动画只要动态改变这个偏移值就好

首先需要通过js获取路径的总长度

//获取路径长度
const arc = document.getElementById('circle');
console.log(arc.getTotalLength()); //250.92141723632812

接着编写svg相关

<style>
circle {
fill: transparent;
stroke-width: 10px;
}
#circle {
stroke-dasharray: 250.921;
stroke-dashoffset: 250.921;
animation: round 3s linear infinite;
}
@keyframes round {
to {
stroke-dashoffset: 0;
}
}
</style>
<g>
<circle cx="100" cy="60" r="40" stroke="#ccc" />
<circle id="circle" cx="100" cy="60" r="40" stroke="hsl(160,80%,50%)" />
</g>

当然其他stroke线条动画也类似

Click Me

接着我们再基于svg animateMotion标签来实现path路径动画,其中path是运动路径,dur 是持续时间,repeatCount设置是否循环

<g id="pathAnimate">
<title> 路径动画 </title>
<path stroke="hsl(0,0%,60%)" d="M 10 300 Q 150 100 300 300 T 490 300Z" stroke-width="2" fill="none"/>
<circle cx="0" cy="0" r="8" stroke-width="1" stroke="hsl(300,10%,40%)" fill="hsl(300,100%,50%)">
<animateMotion path="M 10 300 Q 150 100 300 300 T 500 300Z" dur="4s" repeatCount="indefinite"/>
</circle>
</g>

路径动画

使用svg实现路径动画真是性价比超高。

svg高级应用及动画的更多相关文章

  1. SVG 2D入门11 - 动画

    交互性      SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件.2. SVG能通过cursor良好的捕捉用户鼠标的移动.3. 用户可以很方便的通过设置svg元素的zoomA ...

  2. html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤!都说看不懂了!没办法加注释了!当然数学不好的我也没办法了,当然这还涉及到一门叫做计算机图形学的学科)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css3 svg 物体跟随路径动画教程

    css3 svg 物体跟随路径动画教程https://www.jianshu.com/p/992488f3f3fc

  4. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  5. 利用svg技术实现在线动画演示

    搜索MDCC的论文,发现了这个站点,里面有演示动画,居然是通过svg来实现的. 分享给大家看看: 有空研究下,做一个类似的演示,展示一下OceanBase内部的常见操作. 展示一个svg做的游戏: h ...

  6. 纯SVG实现的Loading动画,拿走不谢

    转载自:https://blog.csdn.net/wo_shi_ma_nong/article/details/88833828 话不多说,直接上代码. ( 到这里看效果: http://www.v ...

  7. CSS笔记 - SVG Polyline 图片绘制动画边框

    <style> div{ width: 420px; height: 200px; background: url('./img/timg.jpg') no-repeat; } polyl ...

  8. 高级UI-自定义动画框架

    有的时候会需要做一些自定义的动画效果,在会反复用到的动画效果可以考虑做成动画框架,方便使用,做成框架的话就需要考虑很多的问题,最典型的问题就是属性和方法必须要是可配置的,这里就来聊一聊自定义动画框架的 ...

  9. 高级UI-属性动画

    在3.0以前,动画效果主要为补间动画(TweenAnimation)和帧动画(FrameAnimation),从3.0开始加入了属性动画,其本质就是不断地改变控件的属性,从而达到复杂的动画效果,其效果 ...

随机推荐

  1. Spring Batch 读 10 万条记录,写到 MongoDB

    实践内容 从 MariaDB 一张表内读 10 万条记录,经处理后写到 MongoDB . 具体实现 1.新建 Spring Boot 应用,依赖如下: <!-- Web 应用 --> & ...

  2. 1005 Spell It Right (20分)

    1005 Spell It Right (20分) 题目: Given a non-negative integer N, your task is to compute the sum of all ...

  3. Mysql 常用函数(19)- mod 函数

    Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html mod 的作用 求余数,和%一样 mod的语法格式 ...

  4. Mysql 常用函数(20)- ceiling 函数

    Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html ceiling 的作用 向上取整,ceil 函数一 ...

  5. jar包名修改工具

    jar包名修改工具 软件传送门:链接: https://pan.baidu.com/s/12StRdEkYGmMn1DuNSquXSw   提取码: i9w1 闲暇之余,利用jarjar.jar写了一 ...

  6. Hadoop CDH版本安装和启动(CentOS7)

    1.创建hadoop组和用户,useradd hadoop passwd hadoop groupadd hadoops usermod -G hadoops hadoop(将hadoop添加到had ...

  7. 一文带你学会国产加密算法SM4的java实现方案

    前言 今天给大家带来一个国产SM4加密解密算法的java后端解决方案,代码完整,可以直接使用,希望给大家带来帮助,尤其是做政府系统的开发人员,可以直接应用到项目中进行加密解密. 画重点!是SM4哦,不 ...

  8. JS数组的常用方法

    arr.join(str) 把arr使用str拼接成字符串 str拼接符 返回:String arr.reverse() 翻转数组 翻转操作的是原数组 返回:Array数组 arr.concat(ar ...

  9. Oracle 大数据查询优化方法

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  10. 模拟SWPU邮件登录页面

    模拟SWPU邮件登录页面设计流程 一.开发工具准备 本次开发该页面时使用的开发工具为vscode—— 在下载安装完成后,需要下载各类插件——如汉化.通过浏览器打开网页插件等. 二.开发过程 首先,打开 ...