5 分钟速通 SVG

  • 5 分钟速通 SVG已关闭评论
  • 93 次浏览
  • A+
所属分类:Web前端
摘要

SVG对不少前端来说就是一个熟悉的陌生人,此篇博客是我学习完SVG后做的一个小总结,帮助我快速回忆SVG相关内容。


前言

SVG对不少前端来说就是一个熟悉的陌生人,此篇博客是我学习完SVG后做的一个小总结,帮助我快速回忆SVG相关内容。

它不能帮你精通 SVG,但是可以帮你快速了解SVG的一些核心内容,不会迷失在一些细枝末节的设定中,让你对 SVG 有一个大概的认识。

基础

SVG全名 Scalable Vector Graphics,是可缩放的矢量图形,可以随意放大缩小并且不失真,最重要的是体积也很小。

SVG 是一种XML语言,由 svg 根元素和一些基本形状元素构成,另外还有一个 g 元素将基本形状元素编组,支持渐变、旋转、动画、滤镜等效果,且能与 js 进行交互。

通常我们使用的 SVG 指的是 SVG1.1,而不是 SVG2.0,因为它的浏览器支持度不够。

我们先给出一个 MDN 上的简单示例:

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">     <rect width="100%" height="100%" fill="red" />     <circle cx="150" cy="100" r="80" fill="green" />     <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> 

效果是:

5 分钟速通 SVG

svg 根元素上的这些除了宽高算是固定格式,下面的三个元素分别是矩形,圆和文字,每个元素上都有坐标定位,上面有些属性用来改变它的位置、大小和填充颜色。

svg 的基本图形元素有:

* rect 矩形 * circle 圆形 * ellipse 椭圆 * line 直线 * polyline 折线 * polygon 多边形 * path 路径 

知道有这么多元素就行了,具体属性看相关文档,不用细究。

前 6 种元素全部可以用 path 实现,但是为了语义化容易读懂,可以尽量用前 6 种。

现在着重讲一下 path

路径 path

pathsvg 基础形状中最强大的一个,可以很容易绘制直线,曲线,弧线。

先给个示例:

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">     <path d="M 10 10 H 90 V 90 H 10 L 10 10" fill="transparent" stroke="black"/> </svg> 

效果是:

5 分钟速通 SVG

示例中的 path 元素上,fillstroke 对前端来说应该容易理解,就是填充和线条颜色,但它定义形状的核心属性d看起来就很容易让人眼前一懵。

d表示一系列的路径命令,而SVG的六种路径命令类型如下:

  • 移动到:M、m
  • 画线至:L、l、H、h、V、v
  • 三次方贝塞尔曲线:C、c、S、s
  • 二次方贝塞尔曲线:Q、q、T、t
  • 椭圆曲线:A、a
  • 封闭路径:Z、z

操作就是使用移动命令移动到指定的点,然后使用剩下的几个路径来绘制线条。

然后我们解析一下上方的SVG例子:

  • 使用移动命令 M 10 10 将画笔移动到横坐标 10,纵坐标 10 的位置
  • 使用画线命令 H 90 向右横向绘制一条直线,这条直线的纵坐标不变,横坐标终点是 90,此时画笔的位置到了横坐标 90,纵坐标 10 的位置
  • 再使用画线命令 V 90 向下纵向绘制一条直线,这条直线的横坐标不变,纵坐标重点为 90,此时画笔的位置到了横坐标 90,纵坐标 90 的位置
  • 最后使用画线命令 L 10 10 ,从当前坐标位置绘制一条到横坐标 10,纵坐标 10 的直线。

最后我们得到的结果就是一个位于横坐标 10、纵坐标 10 位置的宽为 80 的正方形。

最后得提一下封闭路径 Z 这个特殊命令,它没有参数,作用是从当前路径绘制一条直线到路径的第一个点。

渐变和文字

渐变元素

  • linearGradient 线性渐变
  • radialGradient 径向渐变

用到自己看文档,了解有这么个东西就行了。

文字 text 元素 同理。

g 分组

元素g是用来组合对象的容器。添加到g元素的属性会被其所有的子元素继承。

也就是说你可以使用该元素对一批形状进行批量的上色和变换操作。

上个例子:

<svg width="100%" height="100%" viewBox="0 0 95 50"     xmlns="http://www.w3.org/2000/svg">     <g stroke="green" fill="white" stroke-width="5">         <circle cx="25" cy="25" r="15" />         <circle cx="40" cy="25" r="15" />         <circle cx="55" cy="25" r="15" />         <circle cx="70" cy="25" r="15" />     </g> </svg> 

patterns 图案

先来一个使用示例:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">     <defs>         <linearGradient id="Gradient1">             <stop offset="5%" stop-color="white"/>             <stop offset="95%" stop-color="blue"/>         </linearGradient>         <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">             <stop offset="5%" stop-color="red"/>             <stop offset="95%" stop-color="orange"/>         </linearGradient>          <pattern id="Pattern" x="0" y="0" width=".25" height=".25">             <rect x="0" y="0" width="50" height="50" fill="skyblue"/>             <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>             <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>         </pattern>      </defs>      <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/> </svg> 

注意看,渐变元素和图案元素都需要放在 defs 元素内,相当于一个定义,然后实际使用的时候用 fill 属性。

patterns 元素可以认为是对多个图形元素的一个封装,主要是为了进行复用。

其他功能

还有一些其他功能,如:

  • 属性 transform ,类同与同名 CSS 属性,进行位移,缩放,旋转
  • 属性 fill 和 stroke,填充和边框
  • 裁剪元素 clipPath,遮罩元素 mask ,同样放在 defs 元素中
  • 滤镜元素 filter

这些功能不影响大多数情况的使用,用到了直接查文档即可。

SVG 动画的话 IE11 不支持,保险起见可以不用,不过还是列出来一下,它们一般都是被嵌套在形状元素中来使用:

  • animate 元素 定义一个元素的某个属性如何踩着时点改变
  • animateMotion 元素 定义了一个元素如何沿着运动路径进行移动,很像 path
  • animateTransform 元素 控制动画的转换、缩放、旋转或斜切。

至于其他的什么字体之类细枝末节的东西略过吧,平常如果涉及到这类处理我们可能就用 svg 图片了,而不是直接使用 svg。

总结

5 分钟速通 SVG 完毕,相信你已经对 SVG 有了一个稍微全面一点的了解。

通不通无所谓,你就说快不快吧。