SVG学习笔记

【待更新】
之前在github上看到关于用svg制作loading动画，很感兴趣。发现svg很强大，于是搜索资料，将自己的所得总结为这篇文章。文章主要来源MDN https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes 以及张鑫旭博客。http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

基本概念

在了解基本概念之前，先看一张图。SVG使用的网格系统或者说是坐标系统类似于画布。
图1

<svg width="200" height="200" viewBox="0 0 50 50" style="border:1px solid #000;">
    <rect x="10" y="5" width="20" height="20" fill="#000"/>
</svg>

这表示的则是宽200个单位，高200个单位【如果是纯数字，则是使用像素作为单位。但也可以使用其他的单位，例如em,rem等等】。那么viewBox是什么意思呢？我们先来看一下效果：

图2【viewBox的效果】

那么没有viewBox的效果又是怎么样的呢？

图3【没有设置viewBox的效果】

是不是一头雾水？先来看一下viewBox的属性值

viewBox="x, y, width, height"  // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

viewBox其实就是将图1中那块蓝色的部分放大到整个svg的大小。
演示效果可以查看http://www.zhangxinxu.com/study/201408/svg-viewbox-explain.html

基本形状

看一下MDN中给的例子：

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

效果图如下：

图4【svg基本形状】

接下来就来解释一下各个形状。

• rect 矩形

  • x 表示矩形左上角的x坐标

  • y 表示矩形左上角的y坐标

  • rx 表示矩形的角的x圆角半径[类似于border-radius]

  • ry 表示矩形的角的y圆角半径

• circle 圆

  • r 表示半径

  • cx 表示圆心的x坐标

  • cy 表示圆心的y坐标

• ellipse 椭圆

  • cx 表示椭圆中心的x坐标

  • cy 表示椭圆中心的y坐标

  • rx 表示x半径

  • ry 表示y半径

• line 直线
  x1,y1,起点坐标；x2,y2，终点坐标

• polyline 折线
  各个拐点的坐标

• polygon 多边形
  各个顶点坐标

• path 路径【这个后续会再开一篇文章来详细描述】
  接下来解释绘图的部分

• Stroke

  • stroke-linecap【butt | square | round】

    <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
      <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
      <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
    </svg>

    效果图如下：

  图5【stroke-linecap属性】
  由图可看出stroke-linecap的三个属性的差别
  其中粉色的线即为stroke，stroke-width是画笔的宽度，以stroke所在位置为对称轴。

  • stroke-linejoin【miter | round | bevel】
    图6【stroke-linejoin属性】

  • stroke-dasharray 虚线的长度数组

  • 利用CSS来设置

    <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>