svg之viewBox缩放

最新推荐文章于 2024-05-14 10:56:03 发布

userkang

最新推荐文章于 2024-05-14 10:56:03 发布

阅读量1.2w

点赞数 10

分类专栏： css 文章标签： viewbox svg 缩放

本文链接：https://blog.csdn.net/userkang/article/details/84770843

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

举个栗子?

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
    <title>svg-viewbox</title>
  </head>
  <body>
    <svg width="100px" height="200px" style="background:#889cee">
      <circle cx="50" cy="50" r="50" fill="#cec"></circle>
    </svg>
  </body>
</html>

如图所示，这是上面代码运行的结果。在一个宽为100px，高为200px的画布上，画了一个半径为50的圆。圆的起点坐标是（50，50）。

但实际使用过程中，不同的业务场景经常需要对画布的大小作出改变，比如现在我们把画布大小改为宽50px、高100px。就会显示成这样：

 <svg width="50px" height="100px" style="background:#889cee">
   <circle cx="50" cy="50" r="50" fill="#cec"></circle>
 </svg>

里面的内容被画布截断了。我们需要手动再重新修改里面的内容的数值。显然这不是我们想要的结果，我们希望在改变画布大小的同时，里面的内容也可以自动缩放。那么下面我就来利用 viewbox 来实现这个功能。

用 viewBox 解决

我们先给上面的代码加上 viewbox 属性，并且将 viewbox 的值设置为和初始画布1:1。
这里需要说明的是，初始画布的大小一般由内容来定。

viewBox 的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。

一般前面两个值不需要修改，设置为0就可以，除非你需要视口在画布里发生位移。

 <svg
      viewbox="0 0 100 200"
      width="100px"
      height="200px"
      style="background:#889cee"
    >
      <circle cx="50" cy="50" r="50" fill="#cec"></circle>
</svg>

运行代码发现和图一是没有区别的。但当我们把画布大小同样修改为宽50px、高100px。显示就会发生变化：

 <svg
      viewbox="0 0 100 200"
      width="50px"
      height="100px"
      style="background:#889cee"
    >
      <circle cx="50" cy="50" r="50" fill="#cec"></circle>
</svg>

在这里插入图片描述
如上图，里面的内容跟着画布大小的变化发生了缩放。我们缩放的功能实现了。下面我们来分析下原因。

viewBox 分析

之所以能缩放，是因为svg有个特性，在默认情况下，会调整 viewBox 的大小，让 viewBox 正好能被放进 svg 里去。
还拿上面缩放的栗子来说。
在这里插入图片描述
蓝色框是视口的大小，绿色框是内容圆的大小。当画布大小改变的时候，viewBox 需要调整到正好放进 svg 里。所以我们整个显示就缩小了。

以上是视口不变而画布发生改变的情况，我们再来看一个画布不变，视口大小发生变化的。

<svg
      viewbox="0 0 50 100"
      width="100px"
      height="200px"
      style="background:#889cee"
    >
      <circle cx="50" cy="50" r="50" fill="#cec"></circle>
</svg>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20181203151920573.png
上图，我们画布的大小还是初始大小，但是视口的大小缩小为宽50高100，也就是图中蓝色框的区域。按照 viewBox 需要调整到正好放进 svg 里。那么蓝色区域框着的内容区域（绿色画的区域）就会扩大占满画布。

到此，大概了解了 viewbox 的用法。还有一个属性——preserveAspectRatio。

preserveAspectRatio属性

viewbox 默认这个属性的值为：preserveAspectRatio="xMidYMid meet"

preserveAspectRatio 第一个参数有九个可选值，用来表示视口的对齐方式，以左上角为原点，Min表示靠近原点，Mid表示居中，Max 表示远离原点。

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

继续举上面的栗子，当把 viewbox 改为宽高都为100，并且加上 preserveAspectRatio 属性，值为 xMaxYMax：

 <svg
      viewbox="0 0 100 100"
      width="100px"
      height="200px"
      style="background:#889cee"
      preserveAspectRatio="xMaxYMax"
    >
      <circle cx="50" cy="50" r="50" fill="#cec"></circle>
</svg>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20181203154745215.png
我们发现视口是离原点最远对齐的，而不是 preserveAspectRatio 的默认值为居中对齐。有兴趣的可以试试其他值，看看有什么变化。

下面来看看第二个参数： meet 、 slice or none

meet 就是前面那种自动调整 viewBox 可以在 svg 画布中完全展示（以画布的最小边为界，不会超过最小边大小）。

上面的栗子都是这种情况，这里就不再举栗子了。

slice 就是调整 viewBox 可以撑满 svg 画布（以画布最大边为界，可能会超过最小边，但不会超过最大边）。

改变 preserveAspectRatio 的值为 slice，

<svg
      viewbox="0 0 100 100"
      width="100px"
      height="200px"
      style="background:#889cee"
      preserveAspectRatio="xMaxYMax slice"
    >
      <circle cx="50" cy="50" r="50" fill="#cec"></circle>
</svg>

在这里插入图片描述
如上图，对其方式是离原点最远对齐，并且第二个参数为 slice 表示视图会撑满视图最大的边。也就是 viewbox 的高100会以画布的高200做调整。

none 表示 viewBox 会被拉伸到和 svg 画布相同尺寸，里面的内容也会被等比拉伸，不能维持原有比例，如下图：

<svg
      viewbox="0 0 100 100"
      width="100px"
      height="200px"
      style="background:#889cee"
      preserveAspectRatio="none"
    >
      <circle cx="50" cy="50" r="50" fill="#cec"></circle>
</svg>