svg viewBox 属性在线演示
本帖最后由 马黑黑 于 2023-10-29 22:54 编辑 <br /><br /><style>.range { display: flex; align-content: center; gap: 4px; }
.ma > fieldset { padding: 0 20px; width: fit-content; }
.ma > p { margin: 10px 0; }
.rred { color: red; }
#vbMsg { color: red; }
</style>
<div class="ma">
<p class="rred">【特别说明】本帖最后的修改，为更能有助于理解viewBox，强制了viewBox非等比例投射，这涉及到尚未介绍的知识点。</p>
<svg width="300" height="300">
<image href="https://638183.freep.cn/638183/t23/webp2/uzlm.webp" x="0" y="0" width="300" height="300" />
<rect id="rect" x="2" y="50" width="148" height="150" fill="none" stroke="#fff" />
</svg>
<svg id="svg2" width="300" height="300" viewBox="2 50 148 150" preserveAspectRatio="none" style="border: 1px solid pink;">
<image href="https://638183.freep.cn/638183/t23/webp2/uzlm.webp" x="0" y="0" width="300" height="300" />
</svg>
<p>第二个（右边）svg 的 viewBox 属性：viewBox="<span id="vbMsg">2 50 148 150</span>"</p>
<fieldset>
<legend>设置 viewBox 属性：</legend>
<p class="range">
<label for="xx">x </label>
<input id="xx" class="vb" type="range" min="-50" max="350" value="2" />
<output for="xx">2</output>
</p>
<p class="range">
<label for="yy">y </label>
<input id="yy" class="vb" type="range" min="-50" max="350" value="50" />
<output for="xx">50</output>
</p>
<p class="range">
<label for="ww">宽</label>
<input id="ww" class="vb" type="range" min="0" max="400" value="148" />
<output for="ww">148</output>
</p>
<p class="range">
<label for="hh">高</label>
<input id="hh" class="vb" type="range" min="0" max="400" value="150" />
<output for="hh">150</output>
</p>
</filedset>
</div>
<script>
let vbs = document.querySelectorAll('.vb'), outputs = document.querySelectorAll('output');
let attrs = ['x','y','width','height'];
vbs.forEach((item,key) => {
item.oninput = () => {
rect.setAttribute(attrs,vbs.value);
outputs.innerText = vbs.value;
svg2.setAttribute('viewBox',vbs.value + ' ' + vbs.value + ' ' + vbs.value + ' ' + vbs.value);
vbMsg.innerText = vbs.value + ' ' + vbs.value + ' ' + vbs.value + ' ' + vbs.value;
};
});
</script>
本帖最后由 马黑黑 于 2023-10-29 16:59 编辑
一楼左右的演示图案，均通过 svg 实现，两个 svg 的宽高尺寸均为 300*300。左边是待选区，右边 svg 的 viewBox 属性以白色边框矩形模拟；右边是 viewBox 属性演示，viewBox 属性值的改变均能同步展示。
通过拖动任意滑杆，依次改变 viewBox 属性的 x、y、width（宽）、height（高）参数值，每一个值的改变均同步影响 viewBox 效果。
演示的设计中，x、y 最小可以是 -50，最大可以是 350，宽高最低可以是 0（宽高不允许负数，为 0 时表示不呈现 svg 内部元素），最高为 400。
本帖最后由 马黑黑 于 2023-10-29 17:03 编辑
viewBox 属性就是将其所规定的 <min-x> <min-y> <width> <height> 区域重新映射到画布中，请细细体会左边 svg 白色边框矩形里的内容和右边 svg 的关系。 欣赏学习！{:4_187:} 焱鑫磊 发表于 2023-10-29 17:53
欣赏学习！
晚上好 这个白框好，可以非常直观地看到所选的区域{:4_199:} 这种在线交互的演示方式最好了，比纯文字的讲解更容易理解{:4_187:} 现在知道了，前面的两个数字决定了选择哪块区域，后面两个数字决定了“放大”或“缩小”{:4_173:} viewBox="0 0 300 300" 就是原图。 宽高和svg一致时，通过改变前两个数值，可以选择想要的区域。这个挺好，应该挺满足需求。
只是它的选择全是从左上角为参照，没法更详细的切割。 红影 发表于 2023-10-29 19:29
宽高和svg一致时，通过改变前两个数值，可以选择想要的区域。这个挺好，应该挺满足需求。
只是它的选择全 ...
详细切割并放大，还得结合下面两个数字，viewBox="152 89 175 186"差不多切了右边的手环并放大了。 viewBox="-20 39 170 168"这个差不多是切了左边的放到最大了吧{:4_173:} 呀，刷新一下才发现，viewBox="2 50 148 150"才是真正把左边手镯充满的，我的功夫还是太差了{:4_173:} 红影 发表于 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 的知识点还没介绍完，这个演示多少有些缺陷
哦哦，那等着后续的介绍，继续去理解{:4_204:} 红影 发表于 2023-10-29 22:30
哦哦，那等着后续的介绍，继续去理解
估计很难 马黑黑 发表于 2023-10-29 20:11
这个不是这么说的。怎么定义，实际使用时是根据需要来的
嗯嗯，我只是自己去调了一下，然后看调后效果。