SVG 入门指北（二）

SVG 相关概念

本节中所提及的概念非常重要，他是 SVG 的基础，在应用中经常可以看到。需要仔细理解揣摩。

画布

画布无限大，可以在任何位置绘制内容。

视窗（viewport）

在使用 SVG 展示内容时，其实是在通过一个视窗在看画布上的东西。就比如我们透过窗户（视窗）看天空（画布），看到的那一小片天空，叫做视野。随意改变窗户的大小不是一件容易的事，但是可以通过<svg />的属性 width 和 height 来随意改变视窗的宽高。就算不手动设置，浏览器通常也会有默认值。

<!--
在 100px * 100px 的视窗内，以画布的(0,0)点(画布的原点和视窗的原点默认对齐)为圆心画半径为 40 的圆，填充色绿色
-->
<svg width="100" height="100">
  <circle cx='0' cy="0" r="40" fill="green" />
</svg>

See the Pen <a href="https://codepen.io/healerlzh/pen/wvRWVQm"> SVG - default hidden</a> by Healer (<a href="https://codepen.io/healerlzh">@healerlzh</a>) on <a href="https://codepen.io">CodePen</a>.

现实中，透过窗户的视野是有限的。SVG 也一样，所有超出视窗的内容默认不可见，它是通过 SVG 的默认样式overflow: hidden来实现的。所以可以通过设置overflow: visible让超出视窗边界的内容变得可见。

视野（viewBox）

上文我们说透过窗户看到的那片天空是我们视野。在SVG中我们可以选定画布上的任意位置任意大小的内容来放到视窗中做为我们的视野。换句话说，它不像现实中窗外的视野那样总是看那么大范围看那些东西，SVG可以让我们透过有限的视窗，看到画布上任意位置任意大小的内容，这就是SVG viewBox的作用。viewBox 属性的值是一个包含 4 个参数的列表 min-x,min-y,width,height，以空格或者逗号分隔开，min-x 和 min-y 决定了 viewBox 的左上角，width 和 height 决定了 viewBox 的宽和高。注意 width 或 height 如果设置成 0 ，会禁止元素的渲染。

在视窗一节中，我们通过设置overflow: visible 来显示完整的圆。现在我们使用移动视野的方式来实现。

<svg width="100" height="100" viewBox="-40 -40 100 100">
  <circle cx='0' cy="0" r="40" fill="green" />
</svg>

See the Pen <a href="https://codepen.io/healerlzh/pen/RwEGYBo"> SVG - viewBox equal ratio</a> by Healer (<a href="https://codepen.io/healerlzh">@healerlzh</a>) on <a href="https://codepen.io">CodePen</a>.

viewBox 就很像一个取景器，将我们设定坐标范围中的内容呈现在视窗中。 这里视窗与视野大小一致，所展示的内容大小不变。 设置viewBox="-40 -40 80 80"，视野小于视窗 ，内容铺到 100 的视窗中被放大 （这里不做图解和案例了，发挥空间想象）。 设置viewBox="-40 -40 200 200"，视野大于于视窗 ，内容铺到 100 的视窗中被缩小（同上）。

保持纵横比（preserveAspectRatio）

本文为了循序渐进的讲述，上述的案例中视窗与视野的宽高定义总是等比的。现实总是那么不尽人意，如果宽高比不一样，那么视野铺到视窗中的时候，SVG 图形就可能发生变形。由此我们需要preserveAspectRatio(保持纵横比)。

preserveAspectRatio="align [meetOrSlice]"

• align 是否保持纵横比，以及视野与视窗如何对齐

  可选值	说明
  none	不保持纵横比
  xMinYMin	保持纵横比。 横向左侧对齐，纵向顶部对齐。
  xMidYMin	保持纵横比。 横向局中对齐，纵向顶部对齐。
  xMaxYMin	保持纵横比。 横向右侧对齐，纵向顶部对齐。
  xMinYMid	保持纵横比。 横向左侧对齐，纵向局中对齐。
  xMidYMid (默认值)	保持纵横比。纵横局中对齐。
  xMaxYMid	保持纵横比。横向右侧对齐，纵向局中对齐。
  xMinYMax	保持纵横比。横向左侧对齐，纵向底部对齐。
  xMidYMax	保持纵横比。横向局中对齐，纵向底部对齐。
  xMaxYMax	保持纵横比。横向右侧对齐，纵向底部对齐。

• meetOrSlice [可选参数] 如何保持纵横比。align值为none时，此参数无效。

  可选值	说明
  meet (默认值)	保持纵横比缩放视野以适应视窗，能展现视野全部内容。类似background-size: contain
  slice	保持纵横比并放大比例小的方向适应视窗，可能视野展示不全。类似background-size: cover

整两个示例？

See the Pen <a href="https://codepen.io/healerlzh/pen/NWebeZX"> SVG - preserveAspectRatio</a> by Healer (<a href="https://codepen.io/healerlzh">@healerlzh</a>) on <a href="https://codepen.io">CodePen</a>.