SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio
来源:互联网 发布:bat java工程师面试题 编辑:程序博客网 时间:2024/06/13 00:35
SVG除了width和height这两个基本的宽高设置属性
还有两个更高级的属性
viewbox与preserveAspectRatio
SVG视区盒
viewbox是svg标签上的属性
看下面的例子
<svg width=300 height=300> <rect x=10 y=10 width=10 height=10></rect></svg>
rect { fill: red;}
在svg上我们画了一个非常小的红色矩形
现在我们来添加一个viewbox属性
<svg width=300 height=300 viewbox="0 0 30 30"> <rect x=10 y=10 width=10 height=10></rect></svg>
这时我们发现
刚刚还非常袖珍的图形
现在居然变得这么大
这就是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><svg width=300 height=300 viewbox="0 0 100 30"> <rect x=10 y=10 width=10 height=10></rect></svg>
下面我把两种模式写在一块这样可以很好的对比
页面中是这样显示的
绿色的框是我添加的表示viewport中截取的viewbox位置
我们发现被放大后它处于居中的位置
如果我们想要调整它的位置
就需要来使用preserveAspectRatio属性了
preserveAspectRatio
preserveAspectRatio属性值由两部分组成
第一部分:
这里x和Y是组合使用的
同时还要注意x是小写,Y是大写
第二部分:
这个属性值得默认值大概就是 preserveAspectRatio="xMidYMid meet"
我们可以尝试调整这些值来了解这些属性值得含义
<svg width=300 height=300> <rect x=10 y=10 width=10 height=10></rect></svg><svg width=300 height=300 viewbox="0 0 100 30" preserveAspectRatio="xMidYMin meet"> <rect x=10 y=10 width=10 height=10></rect></svg>
<svg width=300 height=300> <rect x=10 y=10 width=10 height=10></rect></svg><svg width=300 height=300 viewbox="0 0 100 30" preserveAspectRatio="xMidYMax meet"> <rect x=10 y=10 width=10 height=10></rect></svg>
第二个属性值
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><svg width=300 height=300 viewbox="0 0 100 30" preserveAspectRatio="xMinYMid slice"> <rect x=10 y=10 width=10 height=10></rect></svg>
这里我把x设置为xMin否则就看不到小红方块了
显示的结果就是我vieport中用紫色框标记的部分
==主页传送门==
- SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio
- 可缩放矢量图形(SVG)入门教程
- Android可缩放矢量图形(SVG)
- 理解SVG viewport,viewBox,preserveAspectRatio缩放
- SVG的viewport,viewBox,preserveAspectRatio缩放
- 可缩放矢量图形 SVG
- SVG(可缩放矢量图形)
- SVG(可缩放矢量图形)虚线相关属性与线条动画原理:一条会动的线
- SVG viewport、viewBox、preserveAspectRatio
- SVG(可缩放矢量图形)基本图形绘制方法与path路径命令
- HTML5 中的可缩放矢量图形(SVG)
- SVG(Scalable Vector Graphics)可缩放矢量图形
- HTML5 中的可缩放矢量图形(SVG)
- SVG可缩放矢量图形(Scalable Vector Graphics)
- SVG(可缩放矢量图形)绘制工具Method Draw
- HTML5 SVG可缩放矢量图形入门
- 可缩放矢量图形SVG的使用
- SVG可缩放矢量图形文件
- 目标跟踪学习算法DSST
- 多个CPU和多核CPU以及超线程(Hyper-Threading)详解
- 七大排序之快速排序
- 一个产品证书管理系统
- Ubuntu通过PPTP协议使用VPN
- SVG(可缩放矢量图形)视区盒属性viewbox与preserveAspectRatio
- Chapter 7 适配器模式
- Android jni代码注册本地方法
- Windows Server 2012 如何实现多个用户远程桌面登陆?
- Android通过oracle的jdbc驱动直接访问oracle数据库
- 初级排序
- day20 RandomAccessFile 字符编码 正则表达式
- 求最大的数(一)
- zoj2109