javascript - 用正确的 viewBox 值替换宽度和高度属性

Question

这个问题有助于理解 viewBox 的用途，但并不完全相同。

目标是用相应的 viewBox 属性替换 SVG 元素的宽度和高度属性。我们的代码需要设置 viewBox，而不是设置宽度和高度。

有没有一种算法方法可以做到这一点？

例如，下面的 SVG 元素在替换为 0 0 6 6 的 viewBox 属性时看起来不一样。

原来的

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='6' height='6'>
<rect width='6' height='6' fill='#eee'/>
<g id='c'>
<rect width='3' height='3' fill='#e6e6e6'/>
<rect y='1' width='3' height='2' fill='#d8d8d8'/>
</g>
<use xlink:href='#c' x='3' y='3'/>
</svg>

已编辑

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox="0 0 6 6">
<rect width='6' height='6' fill='#eee'/>
<g id='c'>
<rect width='3' height='3' fill='#e6e6e6'/>
<rect y='1' width='3' height='2' fill='#d8d8d8'/>
</g>
<use xlink:href='#c' x='3' y='3'/>
</svg>

沙箱 https://jsbin.com/micepar/embed?html,输出

标签： javascripthtmlsvg

Answer 1

TL;DR：你不能，那不是viewBox。

一个 SVG 画布可以被认为是一个无限的绘图表面。viewBox告诉浏览器哪个部分应该可见。这个可见区域将被缩放和定位以适合元素的内容区域。默认值viewBox通常是 x 和 y 为 0，而宽度和高度与元素的像素尺寸相匹配。但是，viewBox不会改变这些维度。

SVG 元素的高度和宽度会改变元素的内容区域。该viewBox区域被缩放以适合该内容区域。如果没有设置高度和宽度，它们将是一些方便的大小，具体取决于浏览器的实现，并且viewBox即使它们看起来在某些情况下也不依赖。