svg高级应用及动画

时间: 2020-05-04阅读: 151标签: svg

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,比如:iconfot,gulp-svg-symbols


css中插入svg

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

  1. html 中内联
  2. object、 iframe 或 embed 标签插入
  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>


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线条动画也类似

接着我们再基于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实现路径动画真是性价比超高。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9253

关闭

如何在vue项目中优雅地使用SVG

安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,在static下新建svg文件夹,用来放置当做icon使用的svg,使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件

通过css改变svg img的颜色

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的解决方案

svg的path的应用

我们这里只要用到M L A 和Z命令就可以了,M L 和Z命令比较简单,这里详细讲解A命令,A命令是画弧的命令,里面的A命令有 7个参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y

SVG弧形进度环实现

先要了解svg能怎么实现的这个问题,svg的哪些元素能实现?A命令可以画椭圆和圆形,rx ry分别表示两个轴的半径,x-axis-rotatio表示x轴的旋转情况,我这里的圆弧是正置的,所以值设为0即可。

svg生成环形进度条

之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制。具体效果如下图:

如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可缩放的矢量图形)完美地解决了上文中提到的部分问题。

关于Data URLs svg图片显示出错和浏览器URL hash #

在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在<img src=\\\"Data URLs\\\">中,Data URLs格式与显示情况如下:

10个开源SVG图标库

在国内,我想大家基本上都是用阿里的iconfont图标库,这里介绍10个其他的开源图标库,下面列出的所有库都是完全开源的,因为我已经检查了许可条款和条件。

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

SVG基础图形和D3.js

学习如何使用D3.js来创建这些图形?这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。使用D3.js画一个SVG 的 圆 circle,可以使用如下代码创建:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广