SVG学习笔记

简介

SVG使用XML来描述二维图形和绘图程序的语言。

SVG形状

SVG在HTML页面

SVG 文件可通过以下标签嵌入 HTML 文档：embed、object 或者 iframe。

例如：

<iframe src="circle1.svg"></iframe>

也可以直接在HTML中嵌入SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

或者是链接到一个SVG文件：

<a href="circle1.svg">View SVG file</a>

SVG矩形-rect

例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20"width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;
  stroke-opacity:0.9;opacity:0.5"/>
</svg>

• x和y属性分别定义矩形距离左侧和顶端的位置
• rx和ry用于使矩形产生圆角
• width和height分别用于定义矩形宽度和高度
• style属性用于定义CSS样式
• fill属性定义填充颜色
• stroke-width定义边框的宽度
• stroke属性定义边框的颜色
• fill-opacity定义背景颜色的透明度
• stroke-opacity定义边框的透明度
• opacity定义整个图像的透明度

SVG圆形-circle

例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

• cx和cy属性定义圆点的圆心坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
• r属性用于定义半径大小
• fill属性定义背景颜色

SVG椭圆形-ellipse

例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

• rx属性定义水平半径
• ry属性定义垂直半径

SVG直线-line

例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

• x1与y1定义起始点
• x2与y2定义终点

SVG多边形-polygon

例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

• points 属性定义多边形每个角的坐标
• style中的fill-rule属性用于定义使用哪一种算法去判别某个点是否在图形内部，共有三个值（nonzero | evenodd | inherit）

SVG曲线-polyline

例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

• 注意：fill属性需要设为none，否则曲线外有部分将被填充颜色

SVG路径-path

path属性支持的指令：

• M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
• L = lineto(L X,Y) ：画直线到指定的坐标位置
• H = horizontal lineto(H X)：画水平线到指定的X坐标位置
• V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
• C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
• S = smooth curveto(S X2,Y2,ENDX,ENDY)
• Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
• T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
• A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
• Z = closepath()：关闭路径

例如：

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

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

• 其中d属性实际上是一个字符串，包含了一系列路径描述
• 注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

SVG文字-text

例如：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

其余常用属性

• defs ：此元素用于预定义一个元素使其能够在SVG图像中重复使用
• g ：该元素用于包围组织一些SVG元素，使得可以整体一起操作
• 注意：在defs元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用use元素来引入它们
• symbol ：该元素兼具g的分组功能和defs初始不可见的特性。symbol能够创建自己的视窗，所以能够应用viewBox（viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度）和preserveAspectRatio属性

此篇笔记是关于SVG的形状初步学习，如果之后有需要，我会继续了解然后完善这篇笔记。