SVG 入门——理解viewport,viewbox,preserveAspectRatio

工欲善其事必先利其器,没有真正搞懂SVG里的viewport,viewbox, preserveAspectRatio这三个属性,就很容易遇到坑,最近写项目用到svg这三个属性被我一眼就略过 ,后来发现自己并没有理解透,导致写项目产生了奇怪的坑,后面解决了,就是原理没通透,趁着大周末,来一波整理吧



一、这些理论知识必不可少

1.viewport

<svg width="400" height="200"></svg>

上面svg中定义的是一个宽度为400 高度为200 的视口,也就是viewport,我们都知道,SVG标签里接下去嵌套的就是SVG的图形曲线等的代码了,这个viewport就是管SVG里面的元素能显示的在多大的一个面板中的意思,拿PS来理解,就是PS中的一个画板的大小,画出来的东西,就只能在这么大的画板里显示,超出了就看不到

  比如我有这样的一个画板

然后我把蓝色方块往下挪

因为我就设置了200高度的viewport,往下挪后蓝色方块就有一部分没显示出来了

  2.viewbox

  这个是重头戏哇,注意啦,敲黑板!

viewbox="x, y, width, height"/*  x:左上角开始的横坐标点  y:左上角往下的纵坐标点  width: viewbox的宽度  height: viewbox的高度*/

以上是语法,下面是上一个实例

<svg width="400" heigh="200" viewbox="0 0 200 200">
     <rect x="0" y="0" width="10" height="10">
</svg>

这段代码会有什么效果呢?实际上viewbox是这样处理的

  ①viewbox="0 0 200 200 "是在宽度为400,高度为200的viewport画板里,从坐标点(0,0)作为viewbox的左上角点,然后再圈出一戈宽度为200 高度为200的viewbox

  ②然后把viewbox中的截屏内容在viewport中显示出来,默认保持纵横比,下面上图

  还没设置viewbox之前

  

设置了viewbox

  

然后将这个viewbox进行铺满viewport,上面的我是用PS话的啊,没注意大小 - =

  下面是代码生成的SVG

  橙色是我画的辅助线,原来位置的,红色是加了viewbox后的效果,SVG的viewbox默认是xMid Ymid meet

  待更,还有一个属性,以及平时写项目的心得总结,今天先写到这儿~

时间: 2024-10-13 20:14:05

SVG 入门——理解viewport,viewbox,preserveAspectRatio的相关文章

理解SVG的viewport,viewBox,preserveAspectRatio

万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="300"></svg> 上面的SVG代码定义了一个视区,宽500单位,高300单位. 注意这里的措辞是"单位",不是"像素".虽然说,width/height如果是纯数字,使用的就是"像素"作为单位的. 也就是说,上面SVG的

深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio

本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约.这个特点导致transform和postioning svg元素显得有些神秘,并且初看起来不是那么浅显易懂.然而,一旦你理解了SVG坐标体系以及transformation是如何工作的,那么操作SVG会变得非常简单.本文中,我们将涵盖控制SVG坐标体系的三个方面内容:viewport, viewBox和

线段树入门理解

在复习算法至分治法时,书本上主要介绍了合并排序和快速排序,较为简单.特拓展简单学习一个应用了分治法的算法结构--线段树. acm刷题时遇到许多连续区间的动态查询问题,例如求取某一区间上元素之和.求取某一区间上元素的最大值,此时如果使用一般的方法求解会使得时间超出要求.此时需要使用到线段树,其主要用于高效解决连续区间的动态查询问题. 线段树,类似区间树,是一个完全二叉树,它在各个节点保存一条线段(数组中的一段子数组),由于二叉结构的特性,它基本能保持每个操作的复杂度为O(lgN),从而大大减少耗时

Webapp---深入理解viewport,viewport测试,viewport查询网站

一,关于深入理解viewport,这里推荐一篇文章: http://www.cnblogs.com/2050/p/3877280.html 二,这是一段viewport测试代码,可以输出layout viewport,visual viewport,ideal viewport: 其实我们最关心的是:ideal viewport的宽度,然后基于这个宽度做流式布局的webapp开发. <html> <head> <meta charset="utf-8"&g

svg入门详解

一.svg是什么? SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 是使用 XML 来描述二维图形和绘图程序的语言. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失. SVG 是万维网联盟的标准. 二.svg的优势 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修改: SVG 图像可被搜索.索引.脚本化或压缩: SVG 是可伸缩的: SVG 图像可在任何的分辨率下被高质量地打

理解SVG的viewport,viewBox【1】

viewport表示的是svg可视区大小,具体体现就是svg元素的width和height属性值所圈起来的区域: <svg width="400" height="300" style="border:1px solid #cd0000;">     <rect x="10" y="5" width="20" height="15" fill=&qu

数据可视化系列--svg入门基础(一)

一.前言 1.SVG(Scalable Vector Graphics)可伸缩矢量图形 特点: (1)使用xml格式来定义图形: (2)用来定义web上的使用的矢量图: (3)改变图像尺寸,图片质量不受损: (4)所有元素属性可以使用动画: (5)继承了W3C标准,在html中使用方式,html直接嵌入svg内容,或者直接引入svg文件. /* svg标签,这里的rect为矩形,在后面的图形元素中会详细说明 */ <svg width="200" height="200

(转载)Java多线程入门理解

转载出处http://blog.csdn.net/evankaka 写在前面的话:此文只能说是java多线程的一个入门,其实Java里头线程完全可以写一本书了,但是如果最基本的你都学掌握好,又怎么能更上一个台阶呢?如果你觉得此文很简单,那推荐你看看Java并发包的的线程池(Java并发编程与技术内幕:线程池深入理解),或者看这个专栏:Java并发编程与技术内幕.你将会对Java里头的高并发场景下的线程有更加深刻的理解. 目录(?)[-] 一扩展javalangThread类 二实现javalan

深入理解viewport(转)

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览