语言►SVG

SVG中的svg元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/12/SVG%E4%B8%AD%E7%9A%84svg%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

  1. 作用
  2. attribute

正文

作用

作为 SVG 文件的根元素，定义了坐标系和 viewport

在 HTML 文件中，也可用于内嵌 SVG 片段

默认情况下，<svg>的左上角为坐标原点，其坐标值为(0, 0)，水平向右为 x 轴正方向，垂直向下为 y 轴正方向

attribute

xmlns

命名空间，全称为”XML namespace”

作为 SVG 文件的根元素时，xmlns是必须声明的

示例：learn_svg/index.svg

1
2
3
<svg xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100"/>
</svg>

在 HTML 文件中内嵌 SVG 片段时，xmlns是可以省略的

示例：learn_svg/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <svg>
      <rect width="100" height="100" />
    </svg>
  </body>
</html>

width

viewport 的宽度

在 HTML 文件中，如果不指定，默认为300

height

viewport 的高度

在 HTML 文件中，如果不指定，默认为150

x

作为内部元素使用时有效，表示四个顶点坐标中 x 的最小值

y

作为内部元素使用时有效，表示四个顶点坐标中 y 的最小值

viewBox

viewBox用于重新定义坐标系的单位长度。

viewBox的值由 4 个数字组成：

  • x 坐标最小值
  • y 坐标最小值
  • 宽度
  • 高度

示例：

  • 在300px * 150px的画布大小内，x 方向的最小值为0，最大值为300，y 方向的最小值为0，最大值为150
  • x 方向上，1 单位长度表示1px，y 方向上，1 单位长度表示1px
  • 绘制一个宽为 100 个单位长度、高为 50 个单位长度的矩形（100px * 50px）
1
2
3
<svg width="300" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50"/>
</svg>

示例：

  • 在300px * 150px的画布大小内，x 方向的最小值为0，最大值为100，y 方向的最小值为0，最大值为50
  • x 方向上，1 单位长度表示3px，y 方向上，1 单位长度表示3px
  • 绘制一个宽为 100 个单位长度、高为 50 个单位长度的矩形（300px * 150px）
1
2
3
<svg width="300" height="150" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="50"/>
</svg>

preserveAspectRatio

当viewBox中定义的宽高比和 viewport 的宽高比不相等时，图形如何缩放和对齐。

缩放

为了更好地理解preserveAspectRatio中的缩放，请回忆一下 CSS 中background-size的缩放策略。

background-size有 3 种缩放策略，前 2 种策略是等比缩放。

  • contain 尽可能缩放图片，保证图片完整显示，无需填满整个背景区
  • cover 尽可能缩放图片，保证填满整个背景区，超出部分可裁剪
  • 自由设定缩放比例（例如：100%）

preserveAspectRatio的缩放策略与background-size非常相似。

background-size preserveAspectRatio
contain meet
cover slice
100% none

示例：contain

1
2
3
4
<svg width="300" height="150" viewBox="0 0 100 300" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="300" stroke="red"/>
    <line x1="0" y1="300" x2="100" y2="0" stroke="red"/>
</svg>

示例：cover

1
2
3
4
<svg width="300" height="150" viewBox="0 0 100 300" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="300" stroke="red"/>
    <line x1="0" y1="300" x2="100" y2="0" stroke="red"/>
</svg>

示例：100%

1
2
3
4
<svg width="300" height="150" viewBox="0 0 100 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="300" stroke="red"/>
    <line x1="0" y1="300" x2="100" y2="0" stroke="red"/>
</svg>

对齐

为了更好地理解preserveAspectRatio中的对齐，请回忆一下 CSS 中background-position的对齐策略。

background-position有 5 种预设的对齐策略。

  • top 居上
  • right 居右
  • bottom 居下
  • left 居左
  • center 居中

preserveAspectRatio的对齐策略与background-position非常相似。

background-position preserveAspectRatio
top xMidYMin
right xMaxYMid
bottom xMidYMax
left xMinYMid
center xMidYMid

在 SVG 中，x 方向上的对齐策略有 3 种：

  • xMin
  • xMid
  • xMax

在 SVG 中，y 方向上的对齐策略有 3 种：

  • yMin
  • yMid
  • yMax

排列以后得到 9 种对齐策略（使用小驼峰命名法）：

  • xMinYMin
  • xMinYMid
  • xMinYMax
  • xMidYMin
  • xMidYMid
  • xMidYMax
  • xMaxYMin
  • xMaxYMid
  • xMaxYMax

示例：meet策略使得 y 方向上占满画布，因此 y 方向上的布局策略无关紧要

1
2
3
4
<svg width="300" height="150" viewBox="0 0 100 300" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="300" stroke="red"/>
    <line x1="0" y1="300" x2="100" y2="0" stroke="red"/>
</svg>

示例：meet策略使得 y 方向上占满画布，因此 y 方向上的布局策略无关紧要

1
2
3
4
<svg width="300" height="150" viewBox="0 0 100 300" preserveAspectRatio="xMidYMin meet" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="300" stroke="red"/>
    <line x1="0" y1="300" x2="100" y2="0" stroke="red"/>
</svg>

示例：meet策略使得 y 方向上占满画布，因此 y 方向上的布局策略无关紧要

1
2
3
4
<svg width="300" height="150" viewBox="0 0 100 300" preserveAspectRatio="xMaxYMin meet" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="300" stroke="red"/>
    <line x1="0" y1="300" x2="100" y2="0" stroke="red"/>
</svg>

示例：meet策略使得 x 方向上占满画布，因此 x 方向上的布局策略无关紧要

1
2
3
4
<svg width="300" height="150" viewBox="0 0 300 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="100" stroke="red"/>
    <line x1="0" y1="100" x2="300" y2="0" stroke="red"/>
</svg>

示例：meet策略使得 x 方向上占满画布，因此 x 方向上的布局策略无关紧要

1
2
3
4
<svg width="300" height="150" viewBox="0 0 300 100" preserveAspectRatio="xMinYMid meet" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="100" stroke="red"/>
    <line x1="0" y1="100" x2="300" y2="0" stroke="red"/>
</svg>

示例：meet策略使得 x 方向上占满画布，因此 x 方向上的布局策略无关紧要

1
2
3
4
<svg width="300" height="150" viewBox="0 0 300 100" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="100" stroke="red"/>
    <line x1="0" y1="100" x2="300" y2="0" stroke="red"/>
</svg>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/12/SVG%E4%B8%AD%E7%9A%84svg%E5%85%83%E7%B4%A0/

本文对你有帮助？请支持我

支付宝
微信