我怎样才能正确地使用svg？

例如，根据我正在阅读的标准，vmin单位应该是包含视口的最小尺寸的1%

举一个简单的例子来说明我的困境，在我当前的chrome实例中，这是方形的：

<svg><rect height="30vmin" width="30vmin" fill="red">

但这不是：

<svg><rect height="50vmin" width="50vmin" fill="red">

使用此主题的变体（关闭标记、向svg元素添加宽度和高度等）表明rect没有使用svg视口作为其参考，而是使用一些包含浏览器上下文的视口作为其参考视口

---

因此，我的问题是：如何向浏览器指定希望vmin单位引用最里面的svg视口？（特别是在处理html文档中嵌入的svg元素时。）

浏览器对CSS3中添加的单元的支持可能仍然不稳定。我最近没查过

但规则是这些单位相对于整个文档进行解析。因此，在浏览器中，这将是整个浏览器窗口

SVGWG问题可能有助于澄清问题。

如何向浏览器指定希望vmin单位引用最里面的svg视口

可以对坐标使用百分比值

<rect height="50%" width="50%" fill="red">

SVG中的所有坐标值实际上都是百分比值。但是，如上所述，适用相同的轴规则

svg{
宽度：200px；
背景色：亚麻布；
}

---

我已接受您的回答，认为您的回答符合我的目的。也就是说，我应该注意到，svg中并不总是接受百分比单位（例如，在多边形中），而且它们也不总是与轴（例如，在圆半径中）特别对齐。（因此，在一个中心圆上覆盖一个多边形和一个百分比是一个……有趣的练习——您的viewbox建议看起来像是一个必要方法的线索。）

viewBox="0 0 100 100"