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>
最佳答案
TL;DR:你不能,这不是 viewBox
所做的。
SVG Canvas 可以被视为无限的绘图表面。 viewBox
告诉浏览器哪一部分应该可见。该可见区域将被缩放和定位以适合元素的内容区域。 viewBox
的默认值通常是 x 和 y 为 0,而宽度和高度与元素的像素尺寸匹配。但是,viewBox
不会更改这些尺寸。
SVG 元素的高度和宽度会更改元素的内容区域。 viewBox
区域会缩放以适合此内容区域。如果未设置高度和宽度,则它们将是一些方便的大小,具体取决于浏览器实现,并且不依赖于 viewBox
,即使它们在某些情况下看起来如此。
关于javascript - 用正确的 viewBox 值替换宽度和高度属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57334850/