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. Linux 解决krb5p安全验证开机无法挂载问题

    从开始练习rhce以来,其中nfs挂载题目经常出现配置没有任何问题,但是开机无法挂载使用krb5p验证的挂载目录. 使用systemctl status mnt-nfssecure.mount命令查看 ...

  2. 2019年牛客多校第一场 E题 ABBA DP

    题目链接 传送门 思路 首先我们知道\('A'\)在放了\(n\)个位置里面是没有约束的,\('B'\)在放了\(m\)个位置里面也是没有约束的,其他情况见下面情况讨论. \(dp[i][j]\)表示 ...

  3. shell脚本中向hive动态分区插入数据

    在hive上建表与普通分区表创建方法一样: CREATE TABLE `dwa_m_user_association_circle`( `device_number` string, `oppo_nu ...

  4. django-发送文件

    客户端授权密码”,勾选“开启”,弹出新窗口填写手机验证码. settings.py配置 EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBac ...

  5. 【模板】A*B Problem（FFT快速傅里叶）

    题目:给出两个n位10进制整数x和y,你需要计算x*y.($n \leq 60000$) 分析: 两个正整数的相乘可以视为两个多项式的相乘, 例如 $15 \times 16 = 240$, 可写成 ...

  6. Bell数入门

    贝尔数 贝尔数是以埃里克·坦普尔·贝尔命名,是组合数学中的一组整数数列,开首是(OEIS的A000110数列): $$B_0 = 1, B_1 = 1, B_2 = 2, B_3 = 5, B_4 = ...

  7. AtCoder Beginner Contest 126 解题报告

    突然6道题.有点慌.比赛写了五个.罚时爆炸.最后一个时间不太够+没敢写就放弃了. 两道题奇奇怪怪的WJ和20/20.今天的评测机是怎么了. A Changing a Character #includ ...

  8. VISIO 2016安装破解

    VISIO 2016安装破解 安装包下载 (2.41G) 安装包下载地址 :https://msdn.itellyou.cn/ ed2k://|file|cn_visio_professional_2 ...

  9. ROM

    ROM 是 read only memory的简称,表示只读存储器,是一种半导体存储器.只读存储器(ROM)是一种在正常工作时其存储的数据固定不变,其中的数据只能读出,不能写入,即使断电也能够保留数据 ...

  10. Python 08 skimage

    原文:https://www.cnblogs.com/xdjun/p/7874794.html 命令: pip install numpy pip install scipy pip install ...