理解SVG的viewport,viewBox,preserveAspectRatio【2】

一个svg,设置了viewBox之后,viewBox的长宽值如果都小于svg的viewport的长宽值,那么结果一定是放大;但是viewBox的长宽值一旦有一个值大于vewport之后,最后的实际效果就不是放大,而是缩小了。

因为viewBox的目的是要自己设置的长宽范围填满viewport。viewport的长宽是确定的,viewBox如果超出了viewport,然后又企图去填满viewport,必然是缩小自己。这里的“填满”换成“适应”应该更合适。viewBox总是试图让自己从初始设置的尺寸变成和viewport具有一样的尺寸。

然而这种放大或缩小其实是有策略的,这个策略由svg的preserveAspectRatio属性来确定。preserveAspectRatio的值成组出现的,第一个参数值表示位置,第二个就是表示缩放策略了。如果第二个值是meet就是缩放比例按照短边的来进行:

<svg width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>

上述代码中 viewBox="0 0 100 100",小于viewport,所以一定是放大,又因为preserveAspectRatio的策略是meet,所以缩放比例遵从短边比例,也就是200/100,放大2倍,实际效果是:

你用chrome开发者工具查看实心红色矩形,会发现它的尺寸是300*300比原来150*150正好放大2倍。

如果preserveAspectRatio的策略是slice:

<svg width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin slice" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>

意味着放大是以长边比例进行的,也就是400/100,4倍。实际效果:

用开发者工具查看,你会发现它变成600x600,相比原来的150x150确实4倍了:

preserveAspectRatio的最后一个策略就是值为none,它的效果和meet时很像,也是以短边比例为准缩放,但实际效果又和meet时不同:

实心矩形的放大倍数和meet时一样,但是实心矩形位置却不同了,左侧多出了更多空白。它是如何形成这种样式结果的有待研究。

参考文章http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

时间: 08-31

理解SVG的viewport,viewBox,preserveAspectRatio【2】的相关文章

理解SVG的viewport,viewBox,preserveAspectRatio

万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="300"></svg> 上面的SVG代码定义了一个视区,宽500单位,高300单位. 注意这里的措辞是"单位",不是"像素".虽然说,width/height如果是纯数字,使用的就是"像素"作为单位的. 也就是说,上面SVG的

理解SVG的viewport,viewBox【1】

viewport表示的是svg可视区大小,具体体现就是svg元素的width和height属性值所圈起来的区域: <svg width="400" height="300" style="border:1px solid #cd0000;">     <rect x="10" y="5" width="20" height="15" fill=&qu

SVG 入门——理解viewport,viewbox,preserveAspectRatio

工欲善其事必先利其器,没有真正搞懂SVG里的viewport,viewbox, preserveAspectRatio这三个属性,就很容易遇到坑,最近写项目用到svg这三个属性被我一眼就略过 ,后来发现自己并没有理解透,导致写项目产生了奇怪的坑,后面解决了,就是原理没通透,趁着大周末,来一波整理吧 一.这些理论知识必不可少 1.viewport <svg width="400" height="200"></svg> 上面svg中定义的是一个

理解SVG图片标签的viewport、viewBox、preserveAspectRatio缩放

一.viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="300"></svg> 上面的SVG代码定义了一个视区,宽500单位,高300单位. 注意这里的措辞是"单位",不是"像素".虽然说,width/height如果是纯数字,使用的就是"像素"作为单位的.也就是说,上面SVG的视区大小就是500px *

理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio

SVG元素不像HTML元素一样由CSS盒模型管理.这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观.然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义.本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性:viewport, viewBox, 和 preserveAspectRatio. 这是本系列三篇文章中的第一篇,这篇文章讨论SVG中的坐标系和变换. 理解SVG坐标系和变换(第一部分)-viewport,viewBox,和preserveAspectRa

深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio

本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约.这个特点导致transform和postioning svg元素显得有些神秘,并且初看起来不是那么浅显易懂.然而,一旦你理解了SVG坐标体系以及transformation是如何工作的,那么操作SVG会变得非常简单.本文中,我们将涵盖控制SVG坐标体系的三个方面内容:viewport, viewBox和

理解SVG坐标系统和变换: transform属性

SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transform属性和CSS属性,包括如何使用,以及你必须知道的关于SVG坐标系变换的知识. 这是我写的SVG坐标系统和变换部分的第二篇.在第一篇中,包括了任何要理解SVG坐标系统基础的需要知道的内容:更具体的是, SVG viewport, viewBox 和 preserveAspectRatio 属性.

理解SVG的图形填充规则

SVG的图形填充规则通过fill-rule属性来指定. 有效值:   nonzero | evenodd | inherit 默认值:   nonzero fill-rule属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” (内部区域将被填充).对一个简单的无交叉的路径,哪块区域是“内部” 是很直观清除的.但是,对一个复杂的路径,比如自相交或者一个子路径包围另一个子路径,“内部”的理解就不那么明确了. nonzero 字面意思是“非零”.按该规则,要判断一个点是否在图形内,从

d3可视化实战01:理解SVG元素特性

一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用严格的XML语法描述图形内容.关于它,主机位于麻省理工学院的W3c官网有着全面的介绍(http://www.w3.org/Graphics/SVG/). 上面这张图片展示了位图和矢量图的区别.位图是由点构成的,矢量图则是由一些形状元素构成.该图中显示放大位图可以看到点,而放大矢量图看到的仍然是形状.