SVG的viewBox、width和height释义, 示例及代码

还是大剑师兰特

已于 2025-01-06 13:59:02 修改

阅读量673

点赞数 2

分类专栏： # SVG综合教程100+ 文章标签： javascript 前端开发语言

于 2023-11-19 00:15:00 首次发布

本文链接：https://blog.csdn.net/cuclife/article/details/134473762

版权

SVG综合教程100+ 专栏收录该内容

9 篇文章

订阅专栏

svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。
在这里插入图片描述

我们可以通过viewBox来修改默认的显示配置，viewBox由4个点组成，viewBox=“x, y, w, h”；其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。而w，h则是定义svg画布的视野区域；默认情况下viewBox=“0,0,width,height”

当w<width、h<height的时候，相当于是拉近了视野，视野小了，但实际显示的区域没有发生变化；这就会导致显示的图形变大，显示的区域变小。
当w>width、h>height的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。

效果图
在这里插入图片描述

源代码

							<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200" viewBox="0 0 3000 3000" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%"/>
  <circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>
	
<svg width="200" height="200" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%"/>
  <circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>	
<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%"/>
  <circle cx="50%" cy="50%" r="40" fill="white"/>
</svg>
</body>
</html>

SVG从1999年由一组加入W3C的公司启动开发，与之前1998年提交给W3C的标准（PGML、VML）构成竞争。SVG从这两个格式吸取了经验。

SVG允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML名字空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。
SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

SVG格式具有以下优点：

图像文件可读，易于修改和编辑（理论上如此，但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件）
与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象
SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索
SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。
SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。

SVG格式具有以下缺点：

如何和已经占有重要市场份额的矢量图形格式Adobe Animate竞争的问题。事实上，Adobe Animate在Flash CC 2014版及以后的版本就都支持直接导出SVG文件了。
SVG的本地运行环境下的厂家支持程度。
由于原始的SVG档是遵从XML语法，导致数据采用未压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。Adobe因此使用gzip压缩开发出压缩的SVG档格式，附档名为 .svgz，但此种文件格式除了Adobe旗下的软件以外，未被广泛支持使用。
旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。