首頁 > web前端 > H5教程 > 主體

SVG(可縮放向量圖形)視區盒屬性viewbox與preserveAspectRatio

黄舟
發布: 2017-02-27 15:08:30
原創
2142 人瀏覽過


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>
    
登入後複製
登入後複製

下面我把兩種模式寫在一塊這樣可以很好的對比
頁面中是這樣顯示的

#綠色的框是我添加的表示viewport中截取的viewbox位置
我們發現被放大後它處於居中的位置
如果我們想要調整它的位置
就需要來使用preserveAspectRatio屬性了

preserveAspectRatio

preserveAspectRatio屬性值由兩部分組成

第一部分:

#xMinviewport和viewBox 左邊對齊xMidviewport和viewBox x軸中心對齊xMaxviewport和viewBox 右邊對齊YMinviewport和viewBox 上邊對齊
屬性值



YMid


viewport和viewBox y軸中心對齊

YMax這裡x和Y是組合使用的同時也要注意x是小寫,Y是大寫屬性值意義meet#保持縱橫比縮放viewBox適應viewport
viewport和viewBox 下邊對齊
第二部分:
#########slice######保持縱橫比同時比例小的方向放大填滿viewport###########none# #####扭曲縱橫比以充分適應viewport############

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

<svg width=300 height=300>
    <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>
    
登入後複製
登入後複製


第二个属性值
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>
    
登入後複製
登入後複製

这里我把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>
登入後複製
登入後複製
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>
    
登入後複製
登入後複製

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

绿色的框是我添加的表示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"
我们可以尝试调整这些值来了解这些属性值得含义

<svg width=300 height=300>
    <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>
    
登入後複製
登入後複製


第二个属性值
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>
    
登入後複製
登入後複製

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

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

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


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!