请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-10-28 10:53 编辑
svg世界中，画布与图像的关系远比我们想象的有趣。画布中的图形由svg元素绘制，比如线条（line）、矩形（rect）、多边形（polygon）、圆（circle）等。这些元素宽高尺寸可以大于画布，若此，于图形个体而言，按照正常逻辑，超出画布的部分是不可见的；事实也是如此，请看如下示例，我们在 100*100 的svg画布上绘制一个圆，圆心在画布的 {60,60} 坐标点上，半径为 60，如此，svg画布装不下整个圆，圆的右边和下边都有一部分不可见：
<svg height="100" width="100" style="border: 1px solid gray;">
<circle cx="60" cy="60" r="60" fill="steelblue" />
</svg>
但是，我们仅需给 svg 添加一个 viewBox 属性——该属性拥有 4 个参数，第一、二个参数设定 viewBox 的起始点坐标 {min-x,min-y}，第三个参数 width 设定其宽度，第四个参数 height 设定其高度——，画布装不下图形的情形立马改变：
<svg height="100" width="100" viewBox="0 0 120 120" style="border: 1px solid gray;">
<circle cx="60" cy="60" r="60" fill="steelblue" />
</svg>
viewBox是什么以及该属性如何工作，我们将另外开帖做具体介绍，本帖的目的主要是感受一下svg画布与图案元素的有趣的尺寸关系。上面示例的代码中，viewBox的宽度和高度都比画布大20个单位，它其实等同于（但不是）将画布变成了 120*120 的尺寸，并将圆心为 {60,60} 半径为 60 的圆画在其上，然后再按照 100:120 的比例将画布和里面的元素缩小，结果得到的实际效果是，圆心在 {50,50} 坐标点上、圆的半径为 50。
如果svg画布里的图形小于画布尺寸，且 viewBox 的 width 和 height 参数值小于 svg 画布的 width 和 height 的属性值，情况又会怎么样？下面，我们在 100*100 的svg画布上的 {5,5} 坐标处画一个半径为 5 的圆：
<svg height="100" width="100" style="border: 1px solid gray;">
<circle cx="5" cy="5" r="5" fill="steelblue" />
</svg>
这是一个很小的圆，我们通过给 svg 加入 viewBox 属性，viewBox="0 0 10 10"，它就会变大：
这和本帖第二个示例效果一致。具体原理留给下一帖再做说明，这里我们要知道的是，svg的 viewBox 属性，可以让svg内部的元素按 viewBox 预设的比例进行缩小或放大，这个机制叫做 zoom，伸缩。
| 
发表于 2023-10-28 10:51
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
