初识 svg 的 viewBox 属性
本帖最后由 马黑黑 于 2023-10-28 10:53 编辑 <br /><br /><style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
</style>
<div class="ma">
<p>svg世界中，画布与图像的关系远比我们想象的有趣。画布中的图形由svg元素绘制，比如线条（line）、矩形（rect）、多边形（polygon）、圆（circle）等。这些元素宽高尺寸可以大于画布，若此，于图形个体而言，按照正常逻辑，超出画布的部分是不可见的；事实也是如此，请看如下示例，我们在 100*100 的svg画布上绘制一个圆，圆心在画布的 {60,60} 坐标点上，半径为 60，如此，svg画布装不下整个圆，圆的右边和下边都有一部分不可见：</p>
<pre>
<svg height="100" width="100" style="border: 1px solid gray;">
<circle cx="60" cy="60" r="60" fill="steelblue" />
</svg>
</pre>
<svg height="100" width="100" style="border: 1px solid gray;">
<circle cx="60" cy="60" r="60" fill="steelblue" />
</svg>
<p>但是，我们仅需给 svg 添加一个 viewBox 属性——该属性拥有 4 个参数，第一、二个参数设定 viewBox 的起始点坐标 {min-x,min-y}，第三个参数 width 设定其宽度，第四个参数 height 设定其高度——，画布装不下图形的情形立马改变：</p>
<pre>
<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>
</pre>
<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>
<p>viewBox是什么以及该属性如何工作，我们将另外开帖做具体介绍，本帖的目的主要是感受一下svg画布与图案元素的有趣的尺寸关系。上面示例的代码中，viewBox的宽度和高度都比画布大20个单位，它其实等同于（但不是）将画布变成了 120*120 的尺寸，并将圆心为 {60,60} 半径为 60 的圆画在其上，然后再按照 100:120 的比例将画布和里面的元素缩小，结果得到的实际效果是，圆心在 {50,50} 坐标点上、圆的半径为 50。</p>
<p>如果svg画布里的图形小于画布尺寸，且 viewBox 的 width 和 height 参数值小于 svg 画布的 width 和 height 的属性值，情况又会怎么样？下面，我们在 100*100 的svg画布上的 {5,5} 坐标处画一个半径为 5 的圆：</p>
<pre>
<svg height="100" width="100" style="border: 1px solid gray;">
<circle cx="5" cy="5" r="5" fill="steelblue" />
</svg>
</pre>
<svg height="100" width="100" style="border: 1px solid gray;">
<circle cx="5" cy="5" r="5" fill="steelblue" />
</svg>
<p>这是一个很小的圆，我们通过给 svg 加入 viewBox 属性，viewBox="0 0 10 10"，它就会变大：</p>
<svg height="100" width="100" viewBox="0 0 10 10" style="border: 1px solid gray;">
<circle cx="5" cy="5" r="5" fill="steelblue" />
</svg>
<p>这和本帖第二个示例效果一致。具体原理留给下一帖再做说明，这里我们要知道的是，svg的 viewBox 属性，可以让svg内部的元素按 viewBox 预设的比例进行缩小或放大，这个机制叫做 zoom，伸缩。</p>
</div> 这个有意思，只是原理挺难懂的。 红影 发表于 2023-10-28 13:22
这个有意思，只是原理挺难懂的。
要跳出常规思维。svg的设计，是很聪明的。 马黑黑 发表于 2023-10-28 21:16
要跳出常规思维。svg的设计，是很聪明的。
看到那个详解，现在知道怎么用了{:4_204:} 红影 发表于 2023-10-29 13:33
看到那个详解，现在知道怎么用了
偶尔还会糊涂的{:4_170:} 马黑黑 发表于 2023-10-29 18:13
偶尔还会糊涂的
还真的是，你说得太准了{:4_173:} 红影 发表于 2023-10-29 21:59
还真的是，你说得太准了
viewBox是个不一般的概念 马黑黑 发表于 2023-10-29 22:34
viewBox是个不一般的概念
跟cad的一个命令差不多{:4_173:} 红影 发表于 2023-10-29 23:47
跟cad的一个命令差不多
是的，都很复杂，要彻底弄懂了才不会懵逼 马黑黑 发表于 2023-10-31 11:12
是的，都很复杂，要彻底弄懂了才不会懵逼
就算细节还没记住，总的方向需要清楚。 红影 发表于 2023-10-31 14:42
就算细节还没记住，总的方向需要清楚。
认真弄了，多少会懂一点的 马黑黑 发表于 2023-10-31 17:04
认真弄了，多少会懂一点的
是的，需要付出点功夫的{:4_187:} 红影 发表于 2023-10-31 20:38
是的，需要付出点功夫的
关键是兴趣和热爱吧 马黑黑 发表于 2023-10-31 22:05
关键是兴趣和热爱吧
还有做帖子的需求{:4_173:} 红影 发表于 2023-10-31 22:27
还有做帖子的需求
需求仅仅是做帖子那就太浪费了 马黑黑 发表于 2023-11-1 07:19
需求仅仅是做帖子那就太浪费了
这是眼前的需求，以后肯定还有更广阔的啊{:4_173:} 红影 发表于 2023-11-1 12:43
这是眼前的需求，以后肯定还有更广阔的啊
也不见得。现在的网络，变化太快，我介绍的这些，似乎仅限于传统的前端，对电脑以外的设备没有涉及 马黑黑 发表于 2023-11-1 19:37
也不见得。现在的网络，变化太快，我介绍的这些，似乎仅限于传统的前端，对电脑以外的设备没有涉及
电脑以外的不管了，反正网上玩应该不会涉及的吧{:4_173:} 红影 发表于 2023-11-1 22:57
电脑以外的不管了，反正网上玩应该不会涉及的吧
很多都可以不管，浏览器其实也考虑到这些，基于计算机的设计，很大程度上能适配各种设备。但要做到主动适配，则需要通过 CSS 甚至JS 进行特殊的处理。 马黑黑 发表于 2023-11-2 07:33
很多都可以不管，浏览器其实也考虑到这些，基于计算机的设计，很大程度上能适配各种设备。但要做到主动适 ...
能适配大多数的就好，主动通过 CSS 甚至JS 进行特殊处理的，都是留给高手的课题{:4_173:}