SVG 元素

SVG 是一种使用 XML 描述图形的标记语言， 元素允许您定义 SVG 内部的可见区域，从而创建自定义“窗口”或“视口”。

语法

<svg>
  <view id="myView" viewBox="0 0 100 100" />
</svg>

在此示例中，视图具有 id 属性 myView，viewBox 属性为 "0 0 100 100"。这意味着视图将从 (0, 0) 开始，大小为 100 x 100。

属性

<view> 元素具有以下属性：

• id：元素的唯一标识符。

• viewBox：定义 SVG 中可见区域的矩形宽度和高度、原点的 x 和 y 坐标。

• preserveAspectRatio：定义如何将 SVG 调整到可视框架中。可选值如下：

  • meet：SVG 在可视框架内单独显示，不改变宽度和高度比例。

  • slice：SVG 保持宽度和高度比例，充满可视框架。

示例

<svg width="300" height="200">
  <rect x="10" y="10" width="50" height="50" fill="red" />
  <rect x="70" y="10" width="50" height="50" fill="blue" />
  
  <view id="redSquare" viewBox="0 0 50 50" />
  <use href="#redSquare" x="10" y="70" width="100" height="100" stroke="black" />
  
  <view id="blueSquare" viewBox="70 10 50 50" preserveAspectRatio="none" />
  <use href="#blueSquare" x="70" y="70" width="100" height="100" stroke="black" />
</svg>

在此示例中，我们创建了一个 300 x 200 的 SVG，其中包含了两个红色和蓝色正方形。

我们使用 元素创建了两个不同的视图：

• redSquare，该视图具有视图框为 (0, 0, 50, 50)。

• blueSquare，该视图具有视图框为 (70, 10, 50, 50) 并使用了 preserveAspectRatio = "none" 属性。

最后，我们使用 元素在 SVG 中重复使用这两个视图，并添加了 x、y、width 和 height 属性。第一个使用 redSquare 视图重复，而第二个使用 blueSquare 视图重复。重复使用的两个方框都位于原始方框的下部，所以它们应沿着这个方向伸展。而第二个视图通过设置 preserveAspectRatio 属性不需要保持宽高比例，这就意味着我们可以使用 x 和 y 属性控制位置，并使用 width 和 height 缩放。

这是一个运行的示例：

注意事项

• <view> 元素只能作为 SVG 根元素的子元素使用。它不能嵌套在其他元素中。

• viewBox 属性必须在 <view> 元素中定义。

• viewBox 属性必须在 <svg> 根元素中定义，否则将无法显示视图。

• 如果未给定 preserveAspectRatio 属性，则默认为 xMidYMid meet。