我的博客

外观

回到顶部
导航

SVG坐标系统

视口

通过width、height指定视口大小。默认使用像素px单位，也可以使用cm、mm、pt等其他单位。

html
<svg width="300" height="300"></svg>

为视口指定用户坐标

使用viewBox指定用户坐标系。语法viewBox: <min-x> <min-y> <width> <height>。在svg中向右为x轴正方向，向下为y轴正方向。

html
<svg width="300" height="300" viewBox="0 0 300 300"></svg>

一般地，视口和viewBox的宽高比是相同的，当然也可以不同。如果不同的话，可以使用preserveAspectRatio属性指定图像对视口的对齐方式。语法：preserveAspectRatio: <align> [<meetOrSlice>]<align>属性值表示是否强制统一缩放，<align>取值如下：

  • none：不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。
y对齐方式x对齐方式
xMin
将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。 		xMid 将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。 xMax
将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。
yMin
将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。 		xMinYMin
xMidYMin
xMaxYMin
yMid 将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。 xMinYMid
xMidYMid（默认值）
xMaxYMid
yMax 将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。 xMinYMax
xMidYMax
xMaxYMax

width=100、height=100、viewBox=0 0 100 100是的图形如下。以上图形是width=100、height=100、viewBox=0 0 100 200时的图形。

<meetOrSlice>可选择的值有两个：

  • meet：默认值。如果图形的宽高比和视图窗口不匹配，则某些视图将会超出 viewbox 范围（即 SVG 的 viewbox 视图将会比可视窗口小）。
  • slice：如果 SVG 的 viewbox 宽高比与可视区域不匹配，则 viewbox 的某些区域将会延伸到视图窗口外部（即 SVG 的 viewbox 将会比可视窗口大）。

嵌套坐标系统

html
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 200 200"
  style="border: 1px dashed #000;"
>
  <circle cx="50" cy="50" r="25" fill="none" stroke="#000" />
  <svg
    x="100px"
    y="5px"
    width="50px"
    height="190px"
    viewBox="0 0 50 190"
  >
    <circle cx="25" cy="25" r="25" fill="none" stroke="#000" />
  </svg>
</svg>