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. 如何临时修改 macOS 应用的界面语言？

    一般情况下,应用程序的界面语言会和系统语言保持一致.但有些时候,我们也会希望临时换用一种不同的界面语言.例如,一些程序的中文翻译词不达意,有必要参考英文界面来确定功能的准确含义:又如,一些网页会强制按 ...

  2. shell 脚本监控linux

    [root@dn3 data]# cat monitor.sh #!/bin/bash cpu_idle=$(top -n2|grep 'Cpu'|tail -n 1|awk '{print $8}' ...

  3. MacOS安装Docker

    傻瓜式安装: 1. 浏览器或命令行下载:https://download.docker.com/mac/stable/Docker.dmg 2. 点击安装文件,拖动图标到应用 3. 确认安装正常:do ...

  4. 12.基于vue-router的案例

    案例分析 用到的路由技术要点: 路由的基础用法 嵌套路由 路由重定向 路由传参 编程式导航 根据项目的整体布局划分好组件结构,通过路由导航控制组件的显示 1.抽离并渲染 App根组件 2.将左侧菜 单 ...

  5. 【python爬虫】动态html

    一.反爬策略 1.请求头 ——user-agent ——referer ——cookie 2.访问频率限制 ——代理池 ——再用户访问高峰期进行爬取,冲散日志.12-13 7-10 ——设置等待时长. ...

  6. SSM框架--Spring+SpringMVC+Mybatis （IDEA）搭建

    使用idea创建一个maven项目( 这里演示 的是 web项目) 点击 Finish 然后开始配置 pom.xml文件(添加各种依赖jar包) 先去找 spring 所需的 jar包 jar包中心仓 ...

  7. [bzoj 4176] Lucas的数论 (杜教筛 + 莫比乌斯反演)

    题面 设d(x)d(x)d(x)为xxx的约数个数,给定NNN,求 ∑i=1N∑j=1Nd(ij)\sum^{N}_{i=1}\sum^{N}_{j=1} d(ij)i=1∑N​j=1∑N​d(ij) ...

  8. 洛谷 P2341 [HAOI2006]受欢迎的牛 题解

    今天学了强连通分量的Tarjan算法,做了这道类似于板子题的题(尽管我调了1.5h).主要的思路是用Tarjan缩点之后,求每个点的入度(实际上是出度,因为我是反着连边的).如果 有且只有一个点的入度 ...

  9. 防火墙firewalld

    增加外部可访问的端口 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl stop firewal ...

  10. zeptojs库

    一.简介 ①Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. ②Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 ...