关于SVG的viewBox

在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小

如下代码svg设置了宽度与高度，rect同样，所以结果自然是全屏

<svg width="200" height="150" style="border:1px solid #cd0000;"><rect width="200" height="150" fill="#cd0000" />
</svg>

考虑下，是不是这段SVG代码中所表达的数据全部均可被绘制出来达到可见呢?

svg出现了一个新的概念：viewBox

SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示

viewBox参数

viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

代码稍微修正下，增加viewBox控制

<svg width="200" height="150" viewBox="0,0,400,300" style="border:1px solid #cd0000;"><rect width="200" height="150" fill="#cd0000" />
</svg>

rect同样与svg尺寸一直，但是显示出来的大小确等比缩小了一倍

试着简单的理解：强制把分辨率提升到400*300 ，那么原来的svg尺寸是200*150，相对于400*300就等比缩小一倍了

同样的，如果把viewBox缩小一倍，那么反之svg会增加一倍

<svg width="200" height="200" viewBox="0,0,100,100" style="border:1px solid #cd0000;"><rect width="200" height="200" fill="#cd0000" />
</svg>

关于SVG的viewBox相关推荐

xml矢量图:svg的viewBox和vml的coordsize决定的虚坐标系简说
SVG: viewBox是SVG的虚坐标系,比VML的简单不少. 为根节点svg元素加上viewBox属性后,在svg下的各图形元素的大小和位置都是按viewBox限定的坐标,而不是页面的实际坐标. ...
SVG 入门——理解viewport,viewbox,preserveAspectRatio
工欲善其事必先利其器,没有真正搞懂SVG里的viewport,viewbox, preserveAspectRatio这三个属性,就很容易遇到坑,最近写项目用到svg这三个属性被我一眼就略过 ,后来发 ...
理解SVG的viewport,viewBox【1】
2019独角兽企业重金招聘Python工程师标准>>> viewport表示的是svg可视区大小,具体体现就是svg元素的width和height属性值所圈起来的区域: <sv ...
SVG中的坐标系统和坐标变换
视野和世界 2D绘图中很多人会有一个误区,就是我绘图的区域是一个矩形区域.无论新建一个画布还是创建了一个容器,心里都想象里面有一个矩形区域.其实,在SVG当中,矩形区域只是视野,是我们看到的部分.实际 ...
react使用引入svg的icon；svg图形制作
由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...
html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
一枚角度渐变描边 loading 图标的 SVG 修炼之路
是的,看标题能绕晕你. 那就通俗点,说点人说的话吧.就是下面这货: 渐变描边这种图标,以一众UI设计师多年深厚的功底,打眼一看就知道,一定是旋转的loading图标.小伙伴称之为什么呢?渐变描边嘛? ...
[html] 使用svg画一个三角形
[html] 使用svg画一个三角形效果 Screen Shot 2020-11-13 at 14 39 20 说明 svg 定义svg元素 viewBox 定义svg的画布大小,0 0 100 1 ...
viewBox视图缩放（1）
文章目录前言一.案例解析前言 svg 的viewBox 可以重新定义视口的显示范围,通常表现为平移,缩放内容,之前测试的一直是viewBox 和viewPort 之间的等比缩放,后来发现不等比情 ...

关于SVG的viewBox

关于SVG的viewBox相关推荐

最新文章

热门文章