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

Question

This question有助于理解 viewBox 的用途，但并不完全相同。

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

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

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

原创

<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,output

Answer 1

TL;DR:你不能，这不是 viewBox 所做的。

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

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