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. 微信小程序之执行环境

    明白了小程序中的 JavaScript 同浏览器以及NodeJS有所不同后,开发者还需要注意到另外一个问题,不同的平台的小程序的脚本执行环境也是有所区别的. 小程序目前可以运行在三大平台: iOS平台 ...

  2. danci

    plain 英 [pleɪn] 美 [plen] adj. 平的:简单的:朴素的:清晰的 n. 平原:无格式:朴实无华的东西 adv. 清楚地:平易地 n. (Plain)人名:(英)普莱恩:(法)普 ...

  3. 10. vue-router命名路由

    命名路由的配置规则 为了更加方便的表示路由的路径,可以给路由规则起一个别名, 即为"命名路由". const router = new VueRouter ({ routes: [ ...

  4. 修改idea,webstrom,phpstrom 快捷键double shift 弹出search everywhere

    这个问题很困惑,因为这个功能很好用,查找什么很方便,but! 我用了十年的搜狗输入法,大家都知道搜狗输入法按shift中英文切换很方便,特别在写代码时候...所以就和这个double shift功能冲 ...

  5. Redis-基础介绍

    Redis 基础介绍 一.Redis介绍 二.Redis和Memecache的不同 三.Redis的最佳应用场景: 四.Redis支持的键值类型 五.安装Redis 六.Redis启动方式 七.Red ...

  6. 解决bash: less: command not found

    问题描述 使用less命令查找日志时,less命令未找到: 解决办法 安装less,执行如下命令: npm install -g less

  7. C/C++中double类型的比较

    由于double浮点数的精度问题,所以在比较大小的时候,不能像int整数型那样,直接if(a==b),if(a<b),if(a>b) 要使用一个精度EPS: ; //一般这样子就够,但有时 ...

  8. webuploader之大文件分段上传、断点续传

    文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...

  9. 使用if和switch制作简单的年龄生肖判断

    -年 查询 --> var oDiv =document.getElementById("cont"); var oYear = document.getElementByI ...

  10. dinoql 使用nodejs 运行的几个问题

    dinoql 是一个很不错的javascript objects 查询处理方案,基于graphql,当前版本有点问题 node 环境运行 ReferenceError: window is not d ...