Question

一个空的SVG（<svg></svg>）将呈现为300px×150px。我可以轻松设置尺寸（例如<svg width="100" height="100"></svg>）。但是，为什么包括一个视图框将默认宽度更改为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>

Answer 1

这是因为HTML中的内联替换元素。

The rules for setting the size of Inline, replaced elements是

如果'height'和'width'的计算值均为'auto'，则   元素也具有固有宽度，则固有宽度为   使用的“宽度”值。
如果'height'和'width'的计算值均为'auto'，则元素没有固有宽度，但是具有固有高度，并且本征比;或者，如果“宽度”的计算值为“自动”， 'height'具有其他计算值，并且元素确实具有本征比;那么'width'的使用值为：
(used height) * (intrinsic ratio)
如果'height'和'width'的计算值均为'auto'，则   元素具有固有比率，但没有固有高度或宽度，则   CSS 2.2中未定义'width'的使用值。但是，这是   建议，如果包含块的宽度本身不依赖于   在被替换元素的宽度上，则'width'的使用值为   从用于块级的约束方程式计算得出，   正常流程中没有替换的元素。



否则，如果“ width”的计算值为“ auto”，则元素为   具有固有宽度，则该固有宽度是   “宽度”。



否则，如果'width'的计算值为'auto'，但没有一个   如果满足上述条件，则“宽度”的使用值变为   300像素。如果300px太宽而无法容纳设备，则UA应使用   比例为2：1且适合   设备。

在第一种情况下，我们就落在最后一个选项

(width: auto, height: auto) => height = 300, width = height * 1 / 2 = 150

在第二种情况下，它们确实设置了非自动值，因此将使用这些值。

在第三种情况下，设置viewBox属性的确定义了本征比，但没有本征大小，因此我们属于第三种情况，这是一种不确定的行为，即使建议“ “宽度”的使用值是根据用于正常流程中块级不可替换元素的约束方程式计算得出的。”。
这意味着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>

Answer 2

Viewbox定义了如何缩放SVG内部使用的所有长度和坐标以适合可用的总空间。

您的画布被设置为浏览器窗口的总视口。

您给了total_amount，这意味着坐标x，y是100和100。

200和150给出画布填充方式的比例。

由于150是200的75％，因此画布将填充100％的宽度和75％的高度。

对于SELECT date_a, a.id, SUM(IF(date_b <= date_a AND MONTH(date_b)=MONTH(date_a),amount,0)) AS total_amount FROM a INNER JOIN b ON a.id=b.id GROUP BY date_a, a.id ORDER BY date_a DESC;或任何其他类似比率（得出1：3/4）的结果都是相同的

为什么viewbox属性会影响SVG元素的大小？

2 个答案: