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

哈喽！今天心血来潮给大家带来了《无尺寸定义的 SVG 画布，浏览器如何确定其大小？ 》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

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

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

示例代码

考虑以下代码片段：

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

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

默认画布尺寸

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

规则

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

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

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

本篇关于《无尺寸定义的 SVG 画布，浏览器如何确定其大小？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！