空 SVG ( <svg></svg> ) 将呈现为 300px × 150px。我可以轻松设置尺寸(例如 <svg width="100" height="100"></svg> )。但是为什么包含一个 viewbox 会将默认宽度更改为 100%，并将高度更改为宽度的 75%？我测试了一个最小的元素:<svg viewbox="100 100 200 150"></svg>试试这个例子:
<html lang="en">
<head>
<style>
body {background-color: lightblue;}
svg {background-color: yellow;}
</style>
</head>
<body>
<svg></svg>
<p>
<svg width="100" height="100"></svg>
<p>
<svg viewbox="100 100 200 150"></svg>
</body>
</html>最佳答案
这是因为 HTML 中的
The rules for setting the size of Inline, replaced elements是
If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'.
If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width, but does have an intrinsic height and intrinsic ratio; or if 'width' has a computed value of 'auto', 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:
(used height) * (intrinsic ratio)If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width, then the used value of 'width' is undefined in CSS 2.2. However, it is suggested that, if the containing block's width does not itself depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.
Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.
Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.
在第一种情况下，我们正好落入最后一个选项
(width: auto, height: auto) => height = 300, width = height * 1 / 2 = 150
在第二种情况下，它们确实设置了非自动值，因此使用了这些值。
在第三种情况下，设置 viewBox 属性确实定义了一个固有比例，但没有定义固有尺寸，所以我们属于第三种情况，这是一种未定义的行为，尽管建议“'width' 的使用值是根据用于正常流中的 block 级、非替换元素的约束方程计算的。”。
这意味着 width = 100%, height = width * ratio = width * 150/200).
const width = cont.offsetWidth;
const ratio = (150 / 200); // viewBox's height / viewBox's width
const height = width * ratio;
console.log('calculated height', height);
console.log('measured height', elem.getBoundingClientRect().height);#elem {background: yellow;}<p id="cont">
<svg id="elem" viewBox="100 100 200 150"></svg>
</p>关于html - 为什么 viewbox 属性会影响 SVG 元素的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56122692/