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. Vue命名规范

    views 命名 views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components.assets 同级. views 下的文件夹命名 v ...

  2. 你真的理解CountDownLatch与CyclicBarrier使用场景吗？

    原文:https://blog.csdn.net/zzg1229059735/article/details/61191679 相信每个想深入了解多线程开发的Java开发者都会遇到CountDownL ...

  3. [LeetCode] 0200. Number of Islands 岛屿的个数

    题目 Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is su ...

  4. Python开发AI应用-国际象棋应用

    AI 部分总述     AI在做出决策前经过三个不同的步骤.首先,他找到所有规则允许的棋步(通常在开局时会有20-30种,随后会降低到几种).其次,它生成一个棋步树用来随后决定最佳决策.虽然树的大小随 ...

  5. 在windows下安装cx_Oracle问题

    将 instantclient_11_2 所在的目录添加到环境变量,但是环境变量有时没有立即生效,可以复制 oci.dll(版本也要正确)到 \Python36\Lib\site-packages 目 ...

  6. 为什么管理人员都喜欢用Visio画图

    一.形状数据一体化 这是管理者最喜欢的功能了,这也Visio的最核心的功能: 操作如下: 例如流程中的步骤.开始日期或结束日期.成本.设备部件等.数字.图标.颜色.标志和进度条等图形有助于快速方便地浏 ...

  7. node爬虫爬取中文时乱码问题 | nodejs gb2312、GBK中文乱码解决方法

    iconv需要依赖native库,这样一来,在一些不支持native模块安装的虚拟主机和windows平台上,我们还是无法安心处理GBK编码. 老外写了一个通过纯Javascript转换编码的模块 i ...

  8. ICMP隧道

    参考文章:http://www.sohu.com/a/297393423_783648

  9. LeetCode 959. Regions Cut By Slashes

    原题链接在这里:https://leetcode.com/problems/regions-cut-by-slashes/ 题目: In a N x N grid composed of 1 x 1 ...

  10. [RN] React Native 使用 FlatList 实现九宫格布局 GridList

    React Native 使用 FlatList 实现九宫格布局 先看图片演示实例: 本文以图片列表为例,实现九宫格布局! 主要有两种方法: 1)方法一: 利用FlatList的 numColumns ...