无尺寸定义的 SVG 画布，浏览器如何确定其大小？

无特定尺寸定义的 svg 画布尺寸

在 html 文档中，SVG 元素可以创建可缩放矢量图形。缺省情况下，SVG 画布没有明确定义其尺寸。本文将探究在这种情况下浏览器如何确定画布大小。

示例代码

考虑以下代码片段：

<svg><circle cx="50" cy="50" r="50" fill="lightblue"></circle><line x1="35" y1="30" x2="35" y2="70" stroke-width="5" stroke="white"></line><line x1="65" y1="30" x2="65" y2="70" stroke-width="5" stroke="white"></line></svg>

在这种情况下，浏览器会为 SVG 画布创建一个默认大小的画布。

默认画布尺寸

对于 SVG 和 canvas 元素，默认画布大小为 300px 宽 x 150px 高。浏览器使用此默认尺寸，除非另有指定。

规则

浏览器确定 SVG 画布大小的规则如下：

• 如果 width 和 height 属性已定义，则浏览器将使用这些定义的大小。
• 如果未定义 width 和 height 属性，则浏览器将使用默认大小：300px x 150px。

在上面提供的示例中，由于没有定义 width 和 height 属性，因此浏览器会使用默认大小 300px x 150px。因此，呈现的画布将为 300px 宽 x 150px 高，并显示为一个红色边框。