蓁祎家进步中

# svg

返回：大基础

概述

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。
其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

# 在 HTML 内容中应用 SVG 效果

在外部文件引入的 SVG 必须与原始文件 同源 ，以防跨域问题

  • VG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg
  id="mysvg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600"
  preserveAspectRatio="xMidYMid meet"
>
  <circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页
<img src="circle.svg" />
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml" />
<iframe id="iframe" src="icon.svg"></iframe>
1
2
3
4
  • CSS 也可以使用 SVG 文件
.logo {
  background: url(icon.svg);
}
1
2
3
  • SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页
<img src="data:image/svg+xml;base64,[data]" />
1

# 语法

<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
1
2
3

<svg>的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。
除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。

如果只想展示 SVG 图像的一部分，就要指定viewBox属性。

如果不指定 width 属性和 height 属性，只指定 viewBox 属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。

# <circle>标签

<svg width="300" height="180">
  <circle cx="30" cy="50" r="25" />
  <circle cx="90" cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
</svg>
1
2
3
4
5

cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于<svg>画布的左上角原点。

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}
1
2
3
4
5
6
7
8
9
  • fill：填充色
  • stroke：描边色
  • stroke-width：边框宽度

# <line>标签

<svg width="300" height="180">
  <line
    x1="0"
    y1="0"
    x2="200"
    y2="0"
    style="stroke:rgb(0,0,0);stroke-width:5"
  />
</svg>
1
2
3
4
5
6
7
8
9
  • x1 属性和 y1 属性，表示线段起点的横坐标和纵坐标；
  • x2 属性和 y2 属性，表示线段终点的横坐标和纵坐标；
  • style 属性表示线段的样式。

# <polyline>标签

<svg width="300" height="180">
  <polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>
1
2
3

points 属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔

# <rect>标签

<svg width="300" height="180">
  <rect
    x="0"
    y="0"
    height="100"
    width="200"
    style="stroke: #70d5dd; fill: #dd524b"
  />
</svg>
1
2
3
4
5
6
7
8
9
  • x 属性和 y 属性，指定了矩形左上角端点的横坐标和纵坐标；
  • width 属性和 height 属性指定了矩形的宽度和高度（单位像素）。

# <ellipse>标签

标签用于绘制椭圆。

<svg width="300" height="180">
  <ellipse
    cx="60"
    cy="60"
    ry="40"
    rx="20"
    stroke="black"
    stroke-width="5"
    fill="silver"
  />
</svg>
1
2
3
4
5
6
7
8
9
10
11
  • cx 属性和 cy 属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；
  • rx 属性和 ry 属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

# <polygon>标签

标签用于绘制多边形。

<svg width="300" height="180">
  <polygon
    fill="green"
    stroke="orange"
    stroke-width="1"
    points="0,0 100,0 100,100 0,100 0,0"
  />
</svg>
1
2
3
4
5
6
7
8

points 属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

# <path>标签

<svg width="300" height="180">
  <path
    d="
  M 18,3
  L 46,3
  L 46,40
  L 61,40
  L 32,68
  L 3,40
  L 18,40
  Z
"
  ></path>
</svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标

  • M：移动到（moveto）
  • L：画直线到（lineto）
  • Z：闭合路径

# <text>标签

<svg width="300" height="180">
  <text x="50" y="25">Hello World</text>
</svg>
1
2
3
  • x 属性和 y 属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。
  • 文字的样式可以用 class 或 style 属性指定。

# <use>标签

用于复制一个形状。

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" />

  <use href="#myCircle" x="10" y="0" fill="blue" />
  <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>
1
2
3
4
5
6
  • href属性指定所要复制的节点，x 属性和 y 属性是<use>左上角的坐标。
  • 还可以指定 width 和 height 坐标。

# <g>标签

标签用于将多个形状组成一个组（group），方便复用

<svg width="300" height="100">
  <g id="myCircle">
    <text x="25" y="20">圆形</text>
    <circle cx="50" cy="50" r="20" />
  </g>

  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
1
2
3
4
5
6
7
8
9