SVG viewBox属性和preserveAspectRatio属性 | 掘金年度征文

日升
VIP.3 渐入佳境
498 阅读5分钟

SVG viewBox属性和preserveAspectRatio属性

viewBox属性

viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。

viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开。

简单的来讲，就是用viewBox属性的四个值所组成的区域，铺满整个svg元素。

通俗的说就是在电脑背景上剪切一块当一个新的背景

不加 viewBox时的元素

<svg width="200" height="200" style="border: 1px solid;">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

没有viewBox

加上viewBox属性时的元素

<svg width="200" height="200" style="border: 1px solid;" viewBox="0 0 100 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

viewBox

示意图：

示意图

我们可以看下元素circle

circle元素

如果我改变 viewBox的值

<svg width="200" height="200" style="border: 1px solid;" viewBox="0 0 400 400">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

此时：

viewBox修改

示意图：

示意图

此时元素circle

circle元素

如果继续修改 viewBox的值

<svg width="200" height="200" style="border: 1px solid;" viewBox="0 0 400 200">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

展示：

展示

元素circle：

展示circle

为什么circled的位置在这个地方呢？而且还是这样的呢？此时就需要说到preserveAspectRatio 属性了

preserveAspectRatio属性

preserveAspectRatio属性表示是否强制进行统一缩放。

先来一张汽车档位图

档位图

可以看到12345R加中间三个连接点总共9各点

preserveAspectRatio属性有两个属性值 align 和 meetOrSlice

align也有9个值(不加none)

九个值正好对应 汽车档位的9个点

分别为

xMinYMinxMidYMinxMaxYMin
xMinYMidxMidYMidxMaxYMid
xMinYMaxxMidYMaxxMaxYMax

Y是大写的

<align> 属性值表示是否强制统一缩放，当SVG的viewbox属性与视图属性宽高比不一致时使用. <align> 属性的值一定是下列的值之一:

  • none 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。 (注意：如果 的值是 none ，则 属性的值将会被忽略。)
  • xMinYMin - 强制统一缩放。

将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。

将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。

  • xMidYMin - 强制统一缩放。

将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。

将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。

  • xMaxYMin - 强制统一缩放。

将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。

将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。

  • xMinYMid - 强制统一缩放。

将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。

将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。

  • xMidYMid (默认值) - 强制统一缩放。

将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。

将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。

  • xMaxYMid - 强制统一缩放。

将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。

将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。

  • xMinYMax - 强制统一缩放。

将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。

将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。

  • xMidYMax - 强制统一缩放。

将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。

将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。

  • xMaxYMax - 强制统一缩放。

将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。

将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。

<meetOrSlice>

<meetOrSlice> 是可选的，如果提供的话， 与 <align> 间隔一个或多个的空格 ，参数所选值必须是以下值之一:

  • meet (默认值) - 图形将缩放到:
    • 宽高比将会被保留
    • 整个SVG的viewbox在视图范围内是可见的
    • 尽可能的放大SVG的viewbox，同时仍然满足其他的条件。

在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出viewbox范围（即SVG的viewbox视图将会比可视窗口小）。

  • slice - 图形将缩放到:
    • 宽高比将会被保留
    • 整个视图窗口将覆盖viewbox
    • SVG的viewbox属性将会被尽可能的缩小，但是仍然符合其他标准。

在这种情况下，如果SVG的viewbox宽高比与可视区域不匹配，则viewbox的某些区域将会延伸到视图窗口外部（即SVG的viewbox将会比可视窗口大）。

示例

<svg width="400" height="300" style="border: 1px solid;">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
当没有 viewBox 和 preserveAspectRatio 属性时：

没有viewBox

只有 viewBox 属性时:
<svg width="400" height="300" style="border: 1px solid;" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

viewBox

preserveAspectRatio 属性为 none 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="none" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

none

preserveAspectRatio 属性为 xMinYMin meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMinYMin slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMinYMin

preserveAspectRatio 属性为 xMinYMid meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMinYMid meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMinYMid slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMinYMid

preserveAspectRatio 属性为 xMinYMax meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMinYMax meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMinYMax slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMinYMax

preserveAspectRatio 属性为 xMidYMin meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMidYMin meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMidYMin slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMidYMin

preserveAspectRatio 属性为 xMidYMid meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMidYMid slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMidYMid

preserveAspectRatio 属性为 xMidYMax meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMidYMax meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMidYMax slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMidYMax

preserveAspectRatio 属性为 xMaxYMin meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMaxYMin meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMaxYMin slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMaxYMin

preserveAspectRatio 属性为 xMaxYMid meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMaxYMid meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMaxYMid slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMaxYMid

preserveAspectRatio 属性为 xMaxYMax meet/slice 时
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMaxYMax meet" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>
<svg width="400" height="300" style="border: 1px solid;" preserveAspectRatio="xMaxYMax slice" viewBox="0 0 200 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

xMaxYMax

掘金年度征文 | 2020 与我的技术之路 征文活动正在进行中......

avatar
文章
阅读
粉丝