我如何正确获得 svg vmin？答案

【问题标题】：How do I get svg vmin right?我如何正确获得 svg vmin？
【发布时间】：2019-09-03 15:16:03
【问题描述】：

根据我正在阅读的标准——例如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 元素时。）

【问题讨论】：

标签： svg

【解决方案1】：

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

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

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

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

您可以使用百分比值作为坐标，

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

然而在 SVG 中，百分比值总是相对于它们的关联轴。所以百分比宽度值是相对于 X 轴的，百分比高度值是相对于 Y 轴的。

或者，您可以使用合适的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>

【讨论】：

我已经接受您的回答，因为我的目的已经足够了。也就是说，我应该注意百分比单位并不总是在 svg 中被接受（例如，在多边形中），并且它们并不总是与轴明确对齐（例如，在圆半径中）。（因此，用百分比将多边形覆盖在中心圆上是一个……有趣的练习——您的视图框建议看起来像是必要方法的线索。）