在网页中使用 svg

插入方式

  • inline
  • external

SVG + JS

inline SVG

SVG 直接写在 html 中

external SVG + internal JS

外部 SVG 文件 + SVG 文件内嵌的 JS

  • JS 需要 用 CDATA 修饰

    1
2
3
4
5

    <script type="text/javascript"><![CDATA[
    var svg = document.getElementById('external-1');
    console.log(svg);
    console.log(1 < 2);
]]></script>

external SVG + external JS

  • 注意

    • 需要在 SVG 文件“加载完成后”，再执行 JS 代码

      1
2
3
4
5
6
7

        <script type="text/javascript">
  window.addEventListener("load", function() {
    var svgObject = document.getElementById('svg-object').contentDocument;
    var svg = svgObject.getElementById('external-1');
    console&&window.log(svg);
  });
</script>

SVG 形状

  • 矩形 Rect
  • 圆形 Circle
  • 椭圆 Ellipse
  • 线 Line
  • 折线 Polyline
  • 路径 Path
  • 多边形 Polygon

矩形

<rect>

Style

  • stroke 边框颜色
  • stroke-with 边框宽度
  • fill 内部填充颜色
  • fill-opacity 填充透明度

属性与参数

  • x, y: 左顶点坐标

    • eg: x="12"
    • 值的单位：“px”
  • with, height
  • rx, ry: 产生圆角

圆形

<circle>

属性与参数

  • cx, cy: 圆心
  • r: 半径

椭圆

<ellipse>

属性与参数

  • cx, cy
  • rx: 水平半径
  • ry: 垂直半径

直线

<line>

属性与参数

  • x1, y1: 起点
  • x2, y2: 终点

多边形

<polygon>

属性与参数

  • points: 顶点

    • eg: points="1,1 100,100 200,100"

    • 注意：

      • 顶点以空格分割，以“，”分割 x,y 坐标

  • fill-rule: 填充规则，指定内部外部的方法 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule

    • 备选值

      • nonzero

        • 最终值不为 0(正或负), 在内部
        • 最终值为 0, 在外部

        • 统计值的方法

          • 发射射线

            • 过顺时针线段，值“加 1”
            • 过逆时针线段，值“减 1”

      • evenodd

        • 过线段数，奇数，内部
        • 过线段数，偶数，外部

        • 统计方法

          • 发射射线，经过线段的数量

折线 Polyline

<polyline>

属性与参数

  • points: 端点和转折点

    • 类似 Polygon

路径

SVG 路径 | 菜鸟教程

<path>

特点

  • 命令式绘图

属性与参数

  • d: 指定路径的命令

    • eg:

      • d="M150 0 L75 200 L225 200 Z"
      • d="M 100 350 l 150 -300"

    • 值的格式

      • 命令开头，空格分割的座标

      • eg："M150 0"

        • M –> Move to 命令
        • "150 0" –> x,y 坐标

命令

  • M(Move to)

    • 开始位置

  • L(Line to)

    • 指定直线的下一个点

  • H(Horizontal line to)

    • 水平线，下一个点

  • V(Vertical line to)

    • 垂直线，下一个点

  • C(Curve to)

    • 曲线

  • S(Smooth to)

    • 平滑

  • Q(quadratic bezier curve to)

    • 贝赛尔曲线

    • eg

      • d="M 100 350 q 150 -300 300 0"

    • 点数

      • 需要两个点

  • T(quadratic bezier smooth to)

    • 贝赛尔平滑

      • 二次贝赛尔方程

  • A(elliptical Arc)

    • 椭圆圆弧

    • eg

      • d="M75,20 a1,1 0 0,0 100,0"

    • 点数

      • 需要三个

  • Z(close path)

    • 闭合路径

文本

<text>

属性与参数

子标签

textpath

通过<path> 指定文本形状

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<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>
  <textPath x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
    </text><text
    </svg>
    <!-- https://www.runoob.com/try/try.php?filename=trysvg_text3 -->

tspan

为子文本，设置样式

1
2
3
4
5
6

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <textPath x="10" y="20" style="fill:red;">Several lines:
  <tspan x="10" y="45">First line</tspan>
  <tspan x="10" y="70">Second line</tspan>
</text>
</svg>

tref

  • 引用之前在<defs>中定义的文本
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

  <svg width="100%" height="100%" viewBox="0 0 1000 300"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <textPath id="ReferencedText">
        引用字符数据 (nhooo.com) </text>
      </defs>

      <text x="100" y="100" font-size="45" >
      内联字符数据 (nhooo.com)  </text>

    <text x="100" y="200" font-size="45" fill="red" >
      <tref xlink:href="#ReferencedText"/>
    </text>

    <!-- 使用“rect”元素显示画布的轮廓 -->
    <rect x="1" y="1" width="598" height="198"
          fill="none" stroke-width="2" /></svg>

把文本嵌入 <a> 中

1
2
3
4
5
6

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="//www.w3cschool.cc/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>

Stroke 线的属性

stroke

颜色

stroke-with

线宽

stroke-linecap

stroke-linecap - SVG: Scalable Vector Graphics | MDN

线端点形状（查看链接说明）

  • 备选值

    • butt
    • round
    • square

stroke-dasharray

stroke-dasharray - SVG: Scalable Vector Graphics | MDN

线型

  • 虚线，点划线等
  • eg: stroke-dasharray="4"

  • 值样式

    • 单个数字

      • 实线，虚线，长度相等

    • 偶数个数字

      • 开始的是实线

    • 奇数个数字

      • eg: 5,2,1

        1. 转换

          • 5,2,1 – 双倍 –> 5,2,1,5,2,1
        2. 和偶数一样解释

defs 定义标签

在 <defs> 中定义的内容，需要被调用时才能使用

1
2
3
4
5
6
7
8
9

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

滤镜

  • 在 defs/filter 中定义

    1
2
3
4
5
6
7
8
9

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="f1" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
      </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3"
    fill="yellow" filter="url(#f1)" />
  </svg>
    • <filter> 中 id 用于被调用
    • 在<rect> 中 filter="url(#f1)" 实现调用

参数传递

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

重用 <use>

重复使用之前的元素

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<svg width="500" height="100">
    <defs>
        <g id="shape">
            <rect x="0" y="0" width="50" height="50" ></rect>
            <circle cx="0" cy="0" r="50" ></circle>
        </g>
    </defs>

    <use xlink:href="#shape" x="50" y="50" ></use>
    <use xlink:href="#shape" x="200" y="50" ></use>

    <circle cx="50"cy="50" r="5" style="fill:#0000ff;"></circle>
    <circle cx="200"cy="50" r="5" style="fill:#0000ff;"></circle>

</svg>

可重复使用组件 <symbol>

  • 其中包含的图形，不会直接显示，需要在<use> 中引用

<title>

  • 不在图形中直接显示，而是以 tooltip 显示