跳到主要内容

HTML SVG

提示
  1. SVG基本介绍：SVG（可缩放矢量图形）用于创建各种二维图形，如形状、标志、图表等，使用<svg>标签嵌入到网页中。
  2. SVG的属性和视图框：SVG具有多种属性，包括preserveAspectRatio控制缩放和对齐，以及viewBox定义视口的位置和尺寸。
  3. SVG的优势：SVG图形在调整大小时保持高质量且文件大小不变，易于通过代码创建和编辑，并且可直接在HTML中使用。

SVG（可缩放矢量图形）用于创建二维图表，如形状、标志、图表等。

HTML <svg> 标签用于在网页中嵌入 SVG 图形。例如，

<svg width="100" height="100" style="border:1px solid black;">
  <circle cx="50" cy="50" r="30" fill="blue" />
</svg>

浏览器输出

一个圆形 SVG

在上面的示例中，代码创建了一个宽度为 100 像素、高度为 100 像素的 SVG 元素。SVG 元素有一个实心黑色边框。

在 <svg> 元素内部，我们使用 <circle> 元素创建了一个圆形。cx 和 cy 属性定义了圆心的 x 和 y 坐标，而 r 属性定义了 半径。fill 属性决定了圆形的颜色，在这个示例中设置为 蓝色。

这些元素一起创建了一个位于 <svg> 容器中心的带黑色边框的蓝色圆形。

SVG 的属性​

SVG 有多种属性。它们包括：

  • preserveAspectRatio
  • 视口和 viewBox

preserveAspectRatio​

preserveAspectRatio 属性用于 SVG 元素，以指定元素在视口内应如何缩放和对齐。此属性决定了元素在调整大小或拉伸时如何保持其宽高比（宽度与高度的比例）。例如，

<svg
  width="100"
  height="150"
  viewBox="0 0 100 100"
  preserveAspectRatio="none"
  style="border: 1px solid black"
>
  <circle cx="50" cy="50" r="50" />
</svg>

浏览器输出

preserveAspectRatio 设置为 none 的 SVG

在这个示例中，preserveAspectRatio 属性设置为 none，因此圆形将被拉伸以适应视口的尺寸。结果是圆形看起来变形了。让我们看另一个例子。

<svg
  width="100"
  height="150"
  viewBox="0 0 100 100"
  preserveAspectRatio="meet"
  style="border: 1px solid black"
>
  <circle cx="50" cy="50" r="50" />
</svg>

浏览器输出 preserveAspectRatio 设置为 &#39;meet&#39; 的 SVG

在这个示例中，preserveAspectRatio 属性设置为 meet，因此圆形将被缩小（如有必要）以适应视口。结果是圆形周围有空白空间。

视口和 viewBox​

SVG 视口​

视口是 SVG 的可见区域。我们使用 width 和 height 属性来定义 SVG 的视口。例如，

<svg width="100" height="100" style="border: 1px solid black">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

HTML SVG

SVG（可缩放矢量图形）用于创建诸如形状、标志、图表等 2D 图形。

在上面的示例中，我们创建了一个 height 和 width 为 100 像素的 SVG。

SVG viewBox​

viewBox 属性定义了 SVG 视口在用户空间中的位置和尺寸。可以将其想象为用于查看 SVG 内部元素的望远镜。我们可以左右移动 viewBox，也可以放大和缩小。让我们看一个示例，

<svg
  width="100"
  height="100"
  viewbox="50 50 50 50"
  style="border: 1px solid black"
>
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

浏览器输出

移动 SVG view box

这里，viewBox 的前两个参数分别是 min-x 和 min-y。它们定义了 viewBox 的左上角。

min-x 的值将我们的 viewBox 向右移动 50 像素。同样地，min-y 的值将我们的 viewBox 向下移动 50 像素。这就是为什么我们只能看到圆形的右下部分。

第三和第四个参数分别代表 viewBox 的 width 和 height。它们也可以用于放大和缩小。

使用 SVG viewBox 缩小​

如果 viewbox 的大小大于视口，圆形会缩小。让我们看一个示例，

<svg
  width="100"
  height="100"
  viewbox="0 0 1000 1000"
  style="border: 1px solid black"
>
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

浏览器输出

SVG viewbox 缩小

在上面的示例中，viewbox 的 height 和 width 值大于视口尺寸，所以圆形缩小了。

使用 SVG viewBox 放大​

如果 viewbox 的大小小于视口，圆形会放大。例如，

<svg
  width="100"
  height="100"
  viewbox="0 0 25 25"
  style="border: 1px solid black"
>
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

浏览器输出

SVG viewbox 放�大

在上面的示例中，viewbox 的 height 和 width 值小于视口尺寸，所以圆形放大了。

为什么使用 SVG？​

使用 SVG 的优势包括：

  • SVG 在调整大小时保持质量，并且仍然轻巧。
  • 它们具有一致的文件大小，可以通过简单的代码轻松创建和编辑。
  • SVG 代码可读性强，不需要任何专门的软件。
最后于 更新