Question

根据我正在阅读的标准（例如https://www.w3.org/TR/css-values-4/#viewport-relative-lengths），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元素时。）

Answer 1

对于那些在CSS3中添加的单元的浏览器支持可能仍然参差不齐。我最近没有检查。

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

此SVGWG问题可能有助于澄清问题。 https://github.com/w3c/svgwg/issues/207

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

您可以将百分比值用于坐标，

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

但是，在SVG中，百分比值始终相对于其关联的轴。因此，宽度百分比值相对于X轴，而高度百分比值相对于Y轴。

或者，您可以使用适当的viewBox和相对于该viewBox的适当坐标值。例如，如果您的viewBox的宽度和高度为100：

viewBox="0 0 100 100"

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

svg {
  width: 200px;
  background-color: linen;
}

<svg viewBox="0 0 100 100">

  <!-- rectnagle 50% x 33.3% -->
  <rect width="50" height="33.3"/>
  
</svg>