svg viewBox 属性在线演示

马黑黑

【特别说明】本帖最后的修改，为更能有助于理解viewBox，强制了viewBox非等比例投射，这涉及到尚未介绍的知识点。

第二个（右边）svg 的 viewBox 属性：viewBox="2 50 148 150"

设置 viewBox 属性：

x 

2

y 

50

宽

148

高

150

马黑黑

一楼左右的演示图案，均通过 svg 实现，两个 svg 的宽高尺寸均为 300*300。左边是待选区，右边 svg 的 viewBox 属性以白色边框矩形模拟；右边是 viewBox 属性演示，viewBox 属性值的改变均能同步展示。
通过拖动任意滑杆，依次改变 viewBox 属性的 x、y、width（宽）、height（高）参数值，每一个值的改变均同步影响 viewBox 效果。

演示的设计中，x、y 最小可以是 -50，最大可以是 350，宽高最低可以是 0（宽高不允许负数，为 0 时表示不呈现 svg 内部元素），最高为 400。

马黑黑

viewBox 属性就是将其所规定的 <min-x> <min-y> <width> <height> 区域重新映射到画布中，请细细体会左边 svg 白色边框矩形里的内容和右边 svg 的关系。

焱鑫磊

欣赏学习！

马黑黑

焱鑫磊 发表于 2023-10-29 17:53
欣赏学习！

晚上好

红影

这个白框好，可以非常直观地看到所选的区域

红影

这种在线交互的演示方式最好了，比纯文字的讲解更容易理解

红影

现在知道了，前面的两个数字决定了选择哪块区域，后面两个数字决定了“放大”或“缩小”

红影

viewBox="0 0 300 300" 就是原图。

红影

宽高和svg一致时，通过改变前两个数值，可以选择想要的区域。这个挺好，应该挺满足需求。
只是它的选择全是从左上角为参照，没法更详细的切割。

红影

红影 发表于 2023-10-29 19:29
宽高和svg一致时，通过改变前两个数值，可以选择想要的区域。这个挺好，应该挺满足需求。
只是它的选择全 ...

详细切割并放大，还得结合下面两个数字，viewBox="152 89 175 186"差不多切了右边的手环并放大了。

红影

viewBox="-20 39 170 168"这个差不多是切了左边的放到最大了吧

红影

呀，刷新一下才发现，viewBox="2 50 148 150"才是真正把左边手镯充满的，我的功夫还是太差了

马黑黑

红影 发表于 2023-10-29 19:29
宽高和svg一致时，通过改变前两个数值，可以选择想要的区域。这个挺好，应该挺满足需求。
只是它的选择全 ...

因为这个 viewBox 的知识点还没介绍完，这个演示多少有些缺陷

马黑黑

红影 发表于 2023-10-29 19:51
呀，刷新一下才发现，viewBox="2 50 148 150"才是真正把左边手镯充满的，我的功夫还是太差了

这个不是这么说的。怎么定义，实际使用时是根据需要来的

马黑黑

醉美水芙蓉 发表于 2023-10-29 19:58
我等着看老师怎么使用？

这个只是知识点介绍

红影

马黑黑 发表于 2023-10-29 20:10
因为这个 viewBox 的知识点还没介绍完，这个演示多少有些缺陷

哦哦，那等着后续的介绍，继续去理解

马黑黑

红影 发表于 2023-10-29 22:30
哦哦，那等着后续的介绍，继续去理解

估计很难

红影

马黑黑 发表于 2023-10-29 20:11
这个不是这么说的。怎么定义，实际使用时是根据需要来的

嗯嗯，我只是自己去调了一下，然后看调后效果。