svg中视区重要的概念

1. viewport  视口，相当于显示器屏幕

2. viewbox   视区，相当于在屏幕上截取一小块，放大到整个屏幕，就是特写的效果

3. preserveAspectRatio  规定viewbox与viewport的对齐方式和缩放方式

viewBox的显示效果正如下图：

SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示。

viewBox的width\height越小，viewBox的效果越明显。好比我们截屏工具选中区域越小，后来截屏内容铺满屏幕时反差越大。

如果是极端情况，设置viewBox的width/height的大小和viewpoint也就是svg的width\height一样大小，那么即使使用了viewBox，也不会改变原有的效果。

它和没有给svg使用viewBox时的情况是一样的。这和你把一个满屏截图铺满屏幕显示是一样的原理，感受不到缩放。

出处：https://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.html

https://my.oschina.net/710409599/blog/307658

svg的viewport和viewbox的更多相关文章

  1. 可视化svg深入理解viewport、viewbox、preserveaspectradio

    直接运行此例子 深入理解svg的viewport.viewbox.preserveaspectradio实例 <!DOCTYPE html> <html lang="en& ...

  2. 理解SVG的viewport,viewBox,preserveAspectRatio

    万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...

  3. 理解SVG中的 viewport，viewBox, preserveAspectRatio

    _ 阅读目录 一:理解viewport 二:理解viewBox 三:理解 preserveAspectRatio 回到顶部 一:理解viewport 该属性表示的是SVG可见区域的大小.或者也可以叫画 ...

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

    一.viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="></svg> 上面的SVG代码定义了一个视区,宽500单 ...

  5. SVG学习笔录（一）

    SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验. HTML体系中,最 ...

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

    工欲善其事必先利其器,没有真正搞懂SVG里的viewport,viewbox, preserveAspectRatio这三个属性,就很容易遇到坑,最近写项目用到svg这三个属性被我一眼就略过 ,后来发 ...

  7. 理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio

    SVG元素不像HTML元素一样由CSS盒模型管理.这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观.然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义.本篇文章中我 ...

  8. Art-Directing SVG图像viewBox属性

    Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...

  9. svg.js教程及使用手册详解（一）

    做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg. ...

随机推荐

  1. 命令启用Windows7 .NetFramework 3.5

    最近在测试某系统安装包在各个环境下的安装使用情况,在window7 下使用时,安装完成iis后,发现.Net Framework 3.5 没有自动勾选:命令没有执行成功. 通过以下命令可以在windo ...

  2. 关闭firefox火狐浏览器下载完成时自动扫描（49.0.2以后版本）

    本人自己找到的方法,亲测有效,如下:1.在火狐浏览器地址里输入about:config回车,可能会提示“这可能使质量保证失效”,点击[我了解此风险!]2.在搜索框里输入browser.safebrow ...

  3. Windows解决端口被占用问题

    第一种解决方法,以8080端口为例 打开命令行输入 cmd ,输入netstat -ano 会显示所有已经在运行的端口情况.PID为进程id 输入你想要查的正在占用的端口号,netstat -ano ...

  4. Python - 2和3的区别

    编码: Python2的默认编码是ASCII码,这是导致Python2中经常遇到编码问题的主要原因之一,至于原因,在于Python这门语言出现的时候,还没有Unicode! Python3默认编码是U ...

  5. test20190903 JKlover

    100+65+100=265,T2就差了一点. 乌合之众 给出一个 n × n 的, 元素为自然数的矩阵.这个矩阵有许许多多个子矩阵, 定义它的所有子矩阵形成的集合为 S . 对于一个矩阵 k , 定 ...

  6. 用Queue控制python多线程并发数量

    python多线程如果不进行并发数量控制,在启动线程数量多到一定程度后,会造成线程无法启动的错误. 下面介绍用Queue控制多线程并发数量的方法(python3). # -*- coding: utf ...

  7. [PWA] Storage information for PWA application

    Be careful with the storage use cases, free the storage when it is necessary.

  8. CF #365 DIV2 D Mishka and Interesting sum 区间异或+线段树

    D. Mishka and Interesting sum time limit per test 3.5 seconds memory limit per test 256 megabytes in ...

  9. sdcf day4 qaq模拟赛总结

    目录 链接 总结 链接 点这里,O(∩_∩)O~ 总结 我还是太菜了,第二题提交了\(8\)遍,真心无语了 总结来看 一是思维能力弱,第二个思维题想了很长时间,想不出来 二是代码能力弱,尽管代码短,但 ...

  10. GoCN每日新闻(2019-10-17)

    GoCN每日新闻(2019-10-17) 通过go module管理go tool https://marcofranssen.nl/manage-go-tools-via-go-modules/ 使 ...