第 38 章 SVG

SVG是一种XML应用，用来表示矢量图形。所有的图形有关信息被存储为纯文本，具有XML的开放性、可移植性和可交互性。当前稳定的XML和SVG版本都为1.1。

38.1 在HTML中使用的方式

38.1.1 作为内容

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。建议使用<iframe>

<iframe src="https://svgsilh.com/svg_v2/639149.svg" frameborder="0" width="200px"></iframe>

38.1.2 作为图片

<img src="https://svgsilh.com/svg_v2/639149.svg" alt="" width="200px">

38.1.3 作为元素

推荐直接使用直接嵌入到HTML页面中。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
    <rect width="200" height="200" fill="#ccc" />
</svg>

38.2 基本概念

38.2.1 坐标系

SVG使用的坐标系统或者说网格系统，这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。在HTML文档中，元素都是用这种方式定位的。

38.2.2 长度单位

基本上，在 SVG 文档中的1个像素对应输出设备（比如显示屏）上的1个像素。SVG也可以定义绝对大小，同时SVG也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。

38.2.3 用户坐标系统

用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。

<svg width="200" height="200" viewBox="0 0 50 50">
    <rect x="10" y="5" width="20" height="20" fill="#cd0000"/>
</svg>

38.3 形状

38.3.1 线 <line>

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="200" x2="200" y2="0"
  style="stroke:#ccc;stroke-width:1"/>
</svg>

38.3.2 矩形 <rect>

  • width 和 height 属性可定义矩形的高度和宽度
  • x 属性定义矩形的左侧位置
  • y 属性定义矩形的顶端位置
  • rx 和 ry 属性可使矩形产生圆角。
  • style 属性用来定义 CSS 属性
    • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
    • CSS 的 stroke-width 属性定义矩形边框的宽度
    • CSS 的 stroke 属性定义矩形边框的颜色
    • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
    • CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
    • CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <rect x="50" y="50" width="100" height="100" style="fill:#ccc;stroke:black;stroke-width:1;opacity:0.5" />
</svg>

38.3.3 圆形 <circle>

  • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
  • r属性定义圆的半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="1" fill="#ccc"/>
</svg>

38.3.4 椭圆 <ellipse>

  • CX属性定义的椭圆中心的x坐标
  • CY属性定义的椭圆中心的y坐标
  • RX属性定义的水平半径
  • RY属性定义的垂直半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px">
  <ellipse cx="50" cy="50" rx="30" ry="20" style="fill:red"/>
</svg>

38.3.5 折线 <polyline>

使用points指定顶点。

<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:1" />
</svg>

38.3.6 多边形 <polygon>

points 用来指定多边形顶点坐标

38.3.7 路径 <path>

path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。

path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
    <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
</svg>

38.4 文本

  • dx,dy x和y方向的偏移。
  • x,y 对tspan进行绝对定位。
  • rotate 旋转字符，可以同时设置多个值，这些值会依次作用在tspan包裹的字母上。
  • baseline-shift 与dy属性设置上下标相比，这个属性更方便，当为super时，会上标。sub时为下标。仅仅在所在的tspan内有效。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="10" y="20" style="fill:black;">多行文字:
    <tspan x="10" y="45">第一行</tspan>
    <tspan x="10" y="70">第二行</tspan>
  </text>
</svg>
多行文字: 第一行 第二行

如果要使得文本沿着某条路径排列，则需要使用textPath元素。需要将文本放在textPath元素内部，然后使用textPath元素的xlink:href属性引用一个定义好的path元素。

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

38.5 填充和边框

fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色，比如说颜色名（像red这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。

38.6 组合

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过<use>元素来引用它们。

38.7 进阶

除了上述基础知识之外，还应该随着需求去深入了解滤镜、蒙版、动画、接口等等内容。