一个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时一样,但是实心矩形位置却不同了,左侧多出了更多空白。它是如何形成这种样式结果的有待研究。
相关推荐
HTML5 SVG购物车付款按钮动画特效代码.zip
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><title>home</title><path d="M37.6 24.104l-4.145-4.186v-6.389h-3.93v2.416L26.05 12.43a1.456 1.456 0 0...
viewBox属性是用于指定用户SVG图像的坐标系统的原点以及尺寸的。所有在SVG内绘制的内容都是相对于这个坐标系统完成的。因为SVG画布在所有方向都是无限延长的,你甚至可以在这个坐标系统的边界之外的地方绘制图形;...
SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" width="400" height="800" preserveAspectRatio viewBox="0 0 400 800"></svg> [removed][removed] [removed][removed] [removed][removed] ...
svg转png, svg文件渲染, 使用plutosvg库
世界所有国家的国旗 SVG 图标 共266国家 1X1和 4x3 格式 文件命名为 国家缩写 (ad.svg)
可以根据svg教程制作任何想要的svg地图,无需在为找不到svg地图资源而发愁,readme里面有个网站,在网站找到想要的地图,下载整理10分钟即可得到自己想要的地图。
svg转css,css转svg,svg与css互相转换并压缩
SVG在线编辑器 在线制作SVG图像 演示地址:http://test.dmscn.net/2241450/ svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用...
从 R2014b 开始,MATLAB 可以直接将图形输出为 SVG 文件(print -dpng)。 生成的图形具有固定大小。 如果您想在您的网站上包含此 SVG,您可能希望它拉伸到包含 HTML 元素的宽度。 此函数编辑由 MATLAB 生成的 SVG ...
可将dxf文件转换为svg文件; 可将svg文件转换为png文件。 压缩包为源码文件
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" width="400" height="800" preserveAspectRatio viewBox="0 0 400 800"></svg> [removed][removed] [removed][removed] [removed][removed] ...
使用场景:很多时候下载的图片都是SVG矢量文件,不适用于需要 ico图片 的场景。 举例说明:比如,iconfont网站上下载的图标资源。 功能描述:此程序使用Python编写 1. 可以将 单个SVG图片文件 转换为 【128/64/48/32...
本程序是基于SVG实现的电力系统主接线图模动态拓扑,实现了主接线的动态拓扑,在线重合闸等操作。
纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表
svg练习