PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >H5教程 > 正文

SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio

原创2017-02-27 15:08:301182 + Vue前端学习QQ群(点击入群)


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

SVG视区盒

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


    
登录后复制
rect {    fill: red;}
登录后复制

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

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


    
登录后复制

这时我们发现
刚刚还非常袖珍的图形
现在居然变得这么大
这就是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)


    
    
登录后复制

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

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

preserveAspectRatio

preserveAspectRatio属性值由两部分组成

第一部分:

属性值含义
xMinviewport和viewBox 左边对齐
xMidviewport和viewBox x轴中心对齐
xMaxviewport和viewBox 右边对齐
YMinviewport和viewBox 上边对齐
YMidviewport和viewBox y轴中心对齐
YMaxviewport和viewBox 下边对齐


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


第二部分:

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

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


    
    
登录后复制



    
    
登录后复制


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


    
    
登录后复制

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

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

==主页传送门==

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

SVG视区盒

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


    
登录后复制
rect {    fill: red;}
登录后复制

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

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


    
登录后复制

这时我们发现
刚刚还非常袖珍的图形
现在居然变得这么大
这就是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)


    
    
登录后复制

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

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

preserveAspectRatio

preserveAspectRatio属性值由两部分组成

第一部分:

属性值含义
xMinviewport和viewBox 左边对齐
xMidviewport和viewBox x轴中心对齐
xMaxviewport和viewBox 右边对齐
YMinviewport和viewBox 上边对齐
YMidviewport和viewBox y轴中心对齐
YMaxviewport和viewBox 下边对齐


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


第二部分:

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

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


    
    
登录后复制



    
    
登录后复制


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


    
    
登录后复制

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

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

以上就是SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio的内容,更多相关内容请关注PHP中文网(www.php.cn)!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

程序员必备接口测试调试工具:点击使用

Apipost = Postman + Swagger + Mock + Jmeter

Api设计、调试、文档、自动化测试工具

后端、前端、测试,同时在线协作,内容实时同步

支持grpc,http,websocket,socketio,socketjs类型接口调试

相关文章

相关视频


视频教程分类

专题推荐

官方公众号

php中文网课程

扫码关注官方公众号
回复“phpcn01”领取php学习资料课程
全套工具、电子书、脑图、内部课程等

推荐视频教程

开通VIP会员课 0元学

热门推荐