SVG 视区

可视区域

可视区域(viewport) 指 SVG 可视区域的大小;主要是通过 width 和 height 属性来定义的;
比如,我们定义一个 width=”400″ 和 height=”200″ 就表示我们定义了一个 400X200 的可视区域;
width 和 height 并没有确定的单位,只填写数字,默认是像素;

实例:定义一个 400X200 的 viewport 并画2个圆形

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="60" cy="60" r="50" fill="red" stroke="none"/>
    <circle cx="340" cy="140" r="50" fill="blue" stroke="none"/>
</svg>

效果:

视区盒子

视区盒子(viewBox)定义 SVG 的可视范围大小;
当没有设置 viewBox 的时候,viewBox 就是整个 viewport 的大小;
当设置 viewBox 时候,SVG 就会截取这个盒子的内容,然后把这块内容适应 viewport 区域来显示(按比例放大,或者剪裁,或者缩小等);
viewBox 通过下面属性确定:

属性 说明
x, y viewBox 左上坐标值,定义盒子的开始位置
width 宽度
height 高度

实例:
在上面 viewport 例子基础上定义一个 viewBox(0 0 200 100)
绿色部分就是 viewBox 区域,为何圆形会变大了,因为 viewBox 截取了(0 0 200 100)这块矩形区域内容进行了放大适应显示,所以你只会看到左边的圆形显示了一部分内容;

<svg width="400" height="200" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="100" fill="darkslategrey"/>
    <circle cx="60" cy="60" r="50" fill="red" stroke="none"/>
    <circle cx="340" cy="140" r="50" fill="blue" stroke="none"/>
</svg>

效果:

上面的例子,viewBox 的长宽比和 viewport 刚好一致,实际上会出现比例不一致的情况,如果我们把上面例子的 viewBox 高度增加到300,超过 viewport 的高度 200,那么它会如何适配呢?答案是默认情况下按比例适配,然后居中显示:
实例:

<svg width="400" height="200" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="300" fill="darkslategrey"/>
    <circle cx="60" cy="60" r="50" fill="red" stroke="none"/>
    <circle cx="340" cy="140" r="50" fill="blue" stroke="none"/>
</svg>

效果:

preserveAspectRatio属性

上面例子我们知道 viewBox 默认是按比例处理图形,那么就可以知道,通过 preserveAspectRatio 属性就是提供额外的其他处理方式
它由2部分值组合而成:
第1个值表示 viewBox 如何与 viewport 对齐,前半部分表示 x 方向对齐,后半部分表示 y 方向对齐;

说明
xMin viewBox 左边对齐
xMid viewBox x轴中心对齐
xMax viewBox 右边对齐
YMin viewBox 顶部对齐(Y大写)
YMid viewBox y轴中心对齐(Y大写)
YMax viewBox 底部对齐(Y大写)

也可以组合使用如:xMinYMin:左上对齐、xMidYMid:居中对齐、xMaxYMax:右下对齐

第2个值表示,如何维持高宽比。

说明
meet 保持纵横比缩放 viewBox 适应 viewport
slice 保持纵横比放大,比例小方向放大填满 viewport
none 不保持纵横比,充分填满 viewport。不用第1个值,因为是填满的

实例:
在上面 viewBox 基础上设置 preserveAspectRatio
preserveAspectRatio=”xMinYMin meet”

<svg width="400" height="200" viewBox="0 0 200 300" preserveAspectRatio="xMinYMin meet"         xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="300" fill="darkslategrey"/>
    <circle cx="60" cy="60" r="50" fill="red" stroke="none"/>
    <circle cx="340" cy="140" r="50" fill="blue" stroke="none"/>
</svg>

preserveAspectRatio=”xMaxYMax meet”

preserveAspectRatio=”xMinYMin slice”

preserveAspectRatio=”xMidYMid slice”

preserveAspectRatio=”none”

在 meet 和 slice 模式下不会同时看到 x, y 方向上的位移,因为总会有一个方向是充满 viewport;

留下评论

电子邮件地址不会被公开。 必填项已用*标注