SVG 学习笔记(1)入门、基础绘图

首先,推荐先阅读MDN上的SVG教程,作为入门教程,对基础知识写得十分详细,一边看一边实验,一遍下来我觉得自己已经基本入门了。

这篇博文作为笔记,我更喜欢按自己的学习习惯来整理信息,同时补充一些图片,这样可以方便自己翻看时快速找到需要的知识点。


为什么要攻克 SVG

  • CANVAS 其实就是一个像素画板,提供各种方式在上面绘图,动画原理是重复刷新绘图,有点偏底层的感觉,效率很高,但对文字不友好,图形非矢量,与传统 DOM 操作大相径庭
  • CSS3 最适合的场境还是过渡动画,绘图功能较弱,结合外部图片资源来制作动画倒是挺实用,有时候我需要在 WEB 项目上绘制图形实现些简单动画,用 CSS3 来实现感觉就像用手来走路一样
  • SVG 可以轻松绘制矢量图形,与 DOM 、 CSS 能很好地协同工作,在传统 WEB 项目里可以很好地补充 CSS3 绘图能力的不足,另外 SVG 还可以以文件形式存在,应用于多种前端渲染

基础属性

  • version:版本,目前的稳定版本是1.1(现在定义版本虽然作用不大,但是想想未来默认为1.2或2.0之类的版本时,那这个1.1就可以保证渲染兼容)

  • baseProfile:none | full | basic | tiny,根据我的理解,以前的WAP手机只支持tiny,但现在应该用full就可以支持所有WEB终端了

  • xmlns:命名空间,http://www.w3.org/2000/svg

  • width:容器宽度

  • height:容器高度

  • viewBox:显示区域,这里需要小展开一下,viewBox="x y w h"表示显示从(x,y)开始,截取长w高h的区域显示出来,这里的显示就好像是“放大镜”那样

    QQ20180209-111754@2x

    view jsfiddle

在web中,<svg>还支持html元素的样式和事件监听属性,即styleonclick

为了明确SVG版本,svg根元素中的version和baseProfile两个属性必须要写,SVG必须始终绑定正确的命名空间


绘图标签 [MDN]

  • <rect>:矩形

    • 起点坐标(左上角):x,y

    • 圆角半戏:rx,ry

    • 尺寸:width,height

    • 示例

      QQ20180209-112946@2x

        <rect x="10" y="10" width="30" height="30"/>
        <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
      
  • <circle>:圆形

    • 圆心坐标:cx,cy

    • 半径:r

    • 示例

      QQ20180209-113202@2x

        <circle cx="25" cy="75" r="20"/>
      
  • <ellipse>:椭圆

    • 圆心坐标:cx,cy

    • x半径和y半径:rx,ry

    • 示例

      QQ20180209-113250@2x

        <ellipse cx="75" cy="75" rx="20" ry="5"/>
      
  • <line>:线条

    • 起点坐标:x1,y1

    • 终点坐标:x2,y2

    • 示例

      QQ20180209-113623@2x

        <line x1="10" x2="50" y1="110" y2="150" stroke-width="2" stroke="#dd4444"/>
      
  • <polyline>:折线

    • 包含起点到终点的所有折点:point

    • 示例

      QQ20180209-113741@2x

        <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" fill="transparent" stroke="#dd4444" stroke-width="2"/>
      
  • <polygon>:多边形(折线的最后一个点自动跟起点相连接)

    • 包含起点到终点的所有折点:point

    • 示例

      QQ20180209-113852@2x

        <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
      
  • <path>:路径

    • 绘制参数:d

    • 示例

      QQ20180209-113953@2x

        <path d="M 20 230 Q 40 205, 50 230 T 90230" fill="transparent" stroke="#dd4444" stroke-width="2"/>
      

    路径可以用来实现直线曲线以及所有几何形状,延伸阅读:
    [MDN-SVG-PATH]
    [深度掌握SVG路径path的贝塞尔曲线指令]

    path 知识点汇总:

    • 大写字母后的坐标是相对容器的坐标,小写字母后的坐标是相对上一坐标的偏移量
    • ML的区别在于M是只移动,不绘图,L会在移动过程中留下线段
    • VH只是L的简化,减少参数可以减少出错
    • CS所谓厕(C)所(S)大仙组合,用来画三次贝塞尔曲线,SC后绘制,系统默认使用C的最后一条切线作为S的第一条切线
    • QT所谓切(Q)图(T)大仙组合,用来画二次贝塞尔曲线,TQ后绘制,系统默认使用Q的最后一条切线作为T的第一条切线
    • Z不分大小写,无参数,用直线连接刚刚路径的终点和起点

上色属性

  • fill:填充,支持颜色字符如 red 或 rgb 色值如#000000,也可以填充图案url(#id)

  • fill-opacity:填充不透明度,0表示全透明,1表示不透明

  • fill-rule:填充规则,支持值 nonzero(默认,正常填充) | evenodd(间隔填充) | inherit(继承)

    利用fill-rule:evenodd可以做出镂空效果

    QQ20180209-154206@2x

    view jsfiddle


描边属性:

  • stroke:描边颜色

  • stroke-width:描边宽度,默认是居中的,无法调整成居内或居外

  • stroke-opacity:描边不透明度,0表示全透明,1表示不透明

  • stroke-dasharray:描边虚线参数,可包含多个数值,分别代表上色长度和留空长度,无限循环

    strokedasharray

    view jsfiddle

  • stroke-linecap:描边终点形状,可选值 butt | square | round,若结合stroke-dasharray属性,将对虚线每一段生效

    MDN e.g

    SVG_Stroke_Linecap_Example

  • stroke-linejoin:描边连接点形状,可选值 miter | round | bevel

    MDN e.g

    SVG_Stroke_Linejoin_Example

  • stroke-miterlimit:描边连接点斜切比例限制,当stroke-linejoinmiter时生效

    这个值是用来跟连接点宽度/stroke-width比较的

    20140906_1_06

    当上图miter length / width length的值大于我们设置的stroke-miterlimit,就会把角切掉一半

    OXXO的详细解说

  • stroke-dashoffset:描边虚线的起点偏移量,通过改变这个参数可以把描边过程制作成动画效果


常用非绘图标签

  • <g>:群组,可包含多个图形元素,它的属性样式会被所有子元素继承 [MDN]
  • <defs>:定义元素,其包含的图形元素不会直接呈现,通常用来定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素,配合<use>来实现 [MDN]
  • <use>:通过href="#id"的方式使用已定义的元素,这个元素可以是在<defs>中定义的,由于href属性在 html 中有定义,所以最好使用其他命名空间,如xmlns:xlink="http://www.w3.org/1999/xlink" [MDN]
若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏