SVG (Scalable Vector Graphics) viewbox attributes viewbox and preserveAspectRatio

黄舟

Release： 2017-02-27 15:08:30

Original

2174 people have browsed it

In addition to the two basic width and height setting properties of width and height, SVG also has two more advanced properties
viewbox and preserveAspectRatio

SVG Viewbox box

viewbox is an attribute on the svg tag

Look at the example below

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

rect {    fill: red;}

Copy after login

On the svg we drew a very small red color Rectangle

Now let’s add a viewbox attribute

<svg width=300 height=300 viewbox="0 0 30 30">
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

At this time we found that

the graphics that were very small just now
now become so big
This is the wonder of viewbox

viewbox="0 0 30 30" 0 0 specifies the coordinates of the origin (upper left)
And 30 30 specifies the width of the svg High
is equivalent to our customized coordinate system of svg
Master Zhang Xinxu has a more vivid explanation of this:

SVG is like our monitor screen, and viewBox is a screenshot tool The selected box,
The final presentation is to display the screenshot content in the frame in full screen again on the monitor!

(If you specify only viewbox without specifying width and height, then the svg will occupy the entire screen)

viewbox and viewport

Due to the width of our svg above The height is 300×300, and we scaled it to 30×30

So it’s easy to figure it out
But how would it behave if it were not scaled proportionally?

Below, the picture in "full screen mode" is called viewport (only width and height are specified)

And the picture in "screenshot mode" is called viewbox (width, height, viewbox is specified)

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

Below I write the two modes together so that they can be compared well

This is how it is displayed on the page

The green box is the viewport I added. The intercepted viewbox position

We found that it is in the center position after being enlarged
If we want to adjust its position
We need to use the preserveAspectRatio attribute

preserveAspectRatio

preserveAspectRatio attribute value consists of two parts

The first part:

##Attribute valuexMinxMidxMaxYMinYMidYMax

Meaning
Viewport and viewBox left alignment
viewport and viewBox x-axis center alignment
Viewport and viewBox are aligned on the right
viewport and viewBox are aligned on the top
Viewport and viewBox y-axis center alignment
viewport and viewBox bottom alignment

Here x and Y are used in combination

Also note that x is lowercase and Y is uppercase

Part 2:

Attribute value##meetKeep vertical and horizontal Than scale the viewBox to adapt to the viewportsliceKeep the aspect ratio while zooming in the direction of the smaller proportion to fill the viewportnoneDistort the aspect ratio to fully fit the viewport

这个属性值得默认值大概就是 preserveAspectRatio="xMidYMid meet"
我们可以尝试调整这些值来了解这些属性值得含义

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

第二个属性值
meet类比于css中background-size的属性值contain
slice类比于css中background-size的属性值cover
CSS3背景相关属性

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

这里我把x设置为xMin否则就看不到小红方块了

显示的结果就是我vieport中用紫色框标记的部分

==主页传送门==

SVG除了width和height这两个基本的宽高设置属性
还有两个更高级的属性
viewbox与preserveAspectRatio

SVG视区盒

viewbox是svg标签上的属性
看下面的例子

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

rect {    fill: red;}

Copy after login

在svg上我们画了一个非常小的红色矩形
现在我们来添加一个viewbox属性

<svg width=300 height=300 viewbox="0 0 30 30">
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

这时我们发现
刚刚还非常袖珍的图形
现在居然变得这么大
这就是viewbox的奇妙之处
viewbox="0 0 30 30"
0 0 指定了原点的坐标（左上）
而30 30指定了svg的宽高
相当于我们自定义了svg的坐标系统
张鑫旭大神对此有一个比较形象的解释：

SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，
最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！

（如果只指定viewbox不指定width和height，那么svg就会占满整个屏幕）

viewbox与viewport

由于我们上面svg的宽高为300×300，被我们等比缩放为了30×30
所以很容易想明白
可是如果不是等比的缩放它又是怎样的行为呢？

下面把“全屏模式”的图片称为viewport（只指定width、height）
而“截屏模式”的图片称为viewbox（指定width、height、viewbox）

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

下面我把两种模式写在一块这样可以很好的对比
页面中是这样显示的

绿色的框是我添加的表示viewport中截取的viewbox位置
我们发现被放大后它处于居中的位置
如果我们想要调整它的位置
就需要来使用preserveAspectRatio属性了

preserveAspectRatio

preserveAspectRatio属性值由两部分组成

第一部分：

Meaning

属性值	含义
xMin	viewport和viewBox 左边对齐
xMid	viewport和viewBox x轴中心对齐
xMax	viewport和viewBox 右边对齐
YMin	viewport和viewBox 上边对齐
YMid	viewport和viewBox y轴中心对齐
YMax	viewport和viewBox 下边对齐

这里x和Y是组合使用的
同时还要注意x是小写，Y是大写

第二部分：

属性值	含义
meet	保持纵横比缩放viewBox适应viewport
slice	保持纵横比同时比例小的方向放大填满viewport
none	扭曲纵横比以充分适应viewport

这个属性值得默认值大概就是 preserveAspectRatio="xMidYMid meet"
我们可以尝试调整这些值来了解这些属性值得含义

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

第二个属性值
meet类比于css中background-size的属性值contain
slice类比于css中background-size的属性值cover
CSS3背景相关属性

<svg width=300 height=300>
    <rect x=10 y=10 width=10 height=10></rect></svg>

Copy after login

这里我把x设置为xMin否则就看不到小红方块了

显示的结果就是我vieport中用紫色框标记的部分

以上就是SVG（可缩放矢量图形）视区盒属性viewbox与preserveAspectRatio的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！