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. Mac电脑永久路由的添加方法是是什么? Mac校园网连接教程

    学校校园网面向全校师生开放,无奈Windows用户基数大,学校只为Windows平台制作了内网连接工具,Mac平台资源较少,本人查阅相关资料后,总结整理出以下步骤,方便本校学生连接校园网. 有永久路由 ...

  2. Notepad++常用快捷键:

    Ctrl-H 打开Find / Replace 对话框 Ctrl-D 复制当前行 Ctrl-L 删除当前行 Ctrl-T 上下行交换 F3 找下一个 Shift-F3 找上一个 Ctrl-Shift- ...

  3. 【Miscalculation UVALive - 6833 】【模拟】

    题目分析 题目讲的是给你一个串,里面是加法.乘法混合运算(个人赛中误看成是加减乘除混合运算),有两种算法,一种是乘法优先运算,另一种是依次从左向右运算(不管它是否乘在前还是加在前). 个人赛中试着模拟 ...

  4. Selenium+TestNG+CSV数据驱动

    1.工程的目录结构: # saas SAAS_UI自动化测试工程 # 一.工程的目录结构 1.saas/src是工程的入口 a.saas/src/main/java/com/saas/encapsul ...

  5. Codeforces I. Vessels(跳转标记)

    题目描述: Vessels time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  6. mybatis多数据库切换,(动态数据源)。

    项目中将一个库的某些标的某些数据保存到另一个库. 使用spring的aop编程动态切换数据源,代码如下,以备下次用到! 1.先将两个数据库连接,创建两个数据源,交于spring管理! <bean ...

  7. Git学习笔记--配置(二)

    由之前文章,总结得出Git的特点: 最优的存储能力: 非凡性能: 开源的: 管理成本低: 很容易做备份: 支持离线操作: 很容易定制工作流程: Git is a free and open sourc ...

  8. navicat 远程连接服务器1130,1045问题报错处理

    本人踩坑多次,一开始网上搜罗,解决办法大同小异,摸索了很久才全部解决完成,小小bug真磨人啊 首先,根据我的踩坑记录,navicat 1045和navicat 1130貌似属于同一种解决方案,都是修改 ...

  9. Random Walk——高斯消元法

    题目 有一个 $N \times M$ 大小的格子,从(0, 0)出发,每一步朝着上下左右4个格子中可以移动的格子等概率移动.另外有些格子有石头,因此无法移至这些格子.求第一次到达 $(N-1, M- ...

  10. LeetCode 931. Minimum Falling Path Sum

    原题链接在这里:https://leetcode.com/problems/minimum-falling-path-sum/ 题目: Given a square array of integers ...