`
xiaoluode
  • 浏览: 14398 次
  • 来自: 深圳
社区版块
存档分类
最新评论

理解SVG的viewport,viewBox,preserveAspectRatio

 
阅读更多

        一个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图像时的viewBox属性用法

    viewBox属性是用于指定用户SVG图像的坐标系统的原点以及尺寸的。所有在SVG内绘制的内容都是相对于这个坐标系统完成的。因为SVG画布在所有方向都是无限延长的,你甚至可以在这个坐标系统的边界之外的地方绘制图形;...

    SVG矢量动画

    6. **SVG Viewbox和PreserveAspectRatio属性**:这两个属性可以用来控制SVG元素在不同尺寸下的显示方式,也可以在动画中发挥重要作用,例如视口动画。 在实际应用中,SVG矢量动画常用于网页图标、图表、地图、用户...

    svg代码与css代码互相转换,并压缩

    charset=utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"&gt;&lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="5" fill="none"/&gt;&lt;/svg&gt;'); width: 100px; height: 100px; } ``` ...

    全国各省市SVG地图 全国各省市SVG地图

    全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...

    c/c++ svg转png, svg文件渲染例子

    在IT行业中,图像处理是不可或缺的一部分,特别是在图形用户界面(GUI)开发和网页设计中。...通过理解SVG和PlutoSVG的工作原理,开发者能够更好地处理矢量图形与像素图之间的转换,提升项目的图形处理能力。

    将阿里iconfont下载后包含多个svg图标的文件转换为单个svg文件

    &lt;svg viewBox="0 0 1024 1024"&gt; 图标ID"&gt; &lt;/svg&gt; ``` 这样,我们就可以通过修改`&lt;use&gt;`标签的`xlink:href`属性来切换显示不同的图标,而无需额外请求每个图标文件。 总结,将阿里Iconfont的多个SVG图标文件...

    svg入门pdf文档

    - **Viewport和Viewbox**:Viewport指定了SVG渲染区域的大小和位置,Viewbox则定义了SVG内容的原始尺寸及其在Viewport中的布局方式。 - **图形分组**:通过使用`&lt;g&gt;`标签对多个SVG元素进行分组,便于整体操作和样式...

    SVG转Android VectorDrawable工具

    在Android应用开发中,高质量的图形资源是必不可少的,SVG(Scalable Vector Graphics)是一种矢量图...在使用过程中,理解SVG和VectorDrawable的区别及转换原理,将有助于更好地利用这类工具,并解决可能出现的问题。

    纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表

    sfile.append("version='1.1' width='100%' height='100%' viewBox='0 0 2024 570'&gt;"); sfile.append("\n"); sfile.append("&lt;defs&gt;&lt;/defs&gt;"); sfile.append("\n"); sfile.append("(1,0,0,1,16.384,-9.83)' ...

    SVG.rar_svg_svg 源代码_svg c++

    SVG的学习资源丰富,包括W3C官方规范、在线教程、示例库和开发者论坛等,对于想要深入理解和运用SVG的人来说,是一个宝贵的资料库。此外,邮件地址"dev@hkingsoft.com"可能是一个开发者社区或者支持服务,可以向他们...

    HTML5 SVG购物车付款按钮动画特效代码.zip

    HTML5 SVG购物车付款按钮动画特效代码.zip

    babel-plugin-inline-svg:Babel插件以优化和内嵌svg

    svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"&gt;&lt;title&gt;home&lt;/title&gt;&lt;path d="M37.6 24.104l-4.145-4.186v-6.389h-3.93v2.416L26.05 12.43a1.456 1.456 0 0...

    svg转css,css转svg,svg与css互相转换并压缩

    同时,理解文件压缩原理和方法,如Base64编码和CSS minification,有助于减少资源占用,提升网站加载速度。对于JavaScript工具包的使用,开发者需要阅读相关文档,学习如何正确集成和使用这些工具,以满足项目需求。

    dxf转svg,svg转png

    标题提到的“dxf转svg,svg转png”涉及两种不同的转换过程,都是图形文件格式之间的转换。DXF(Drawing Exchange Format)是AutoCAD用于二维绘图的数据交换格式,SVG(Scalable Vector Graphics)是一种基于XML的矢量...

    大神级SVG_demo

    - **窗口抖动(window resize)**:SVG图形可以响应浏览器窗口大小的变化,保持图形的相对比例,通常通过CSS的`viewBox`属性和`preserveAspectRatio`属性实现。 4. **SVG动画**: - **变换(transform)**:`...

    SVG.zip_SVG 仿真模型_SVG模型仿真_svg 仿真_svg 无功_无功仿真

    3. 电力电子技术:SVG的核心是电力电子变换器,包括IGBT、IGCT等半导体开关器件,需要深入理解其工作原理和特性。 4. 仿真工具:如MATLAB/Simulink,它提供了丰富的库函数和模块,方便构建SVG模型并进行实时仿真。 ...

    SVG_SVG仿真_svg_psim_

    SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、软件开发和图形用户界面中...记住,理解和掌握SVG的基本语法、PSIM的仿真原理以及两者间的接口技术是成功实现这一目标的关键。

    svg(SVG)

    SVG,全称Scalable Vector Graphics,是一种基于XML(可扩展标记语言)的二维矢量图形格式。在网页设计、应用程序开发以及数据可视化等领域中,...无论是初学者还是经验丰富的开发者,深入理解SVG都会带来巨大的益处。

Global site tag (gtag.js) - Google Analytics