时间戳

首页 > 解决方案 > 我如何正确获得 svg vmin？

svg - 我如何正确获得 svg vmin？

问题描述

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

解决方案

浏览器对那些在 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>

推荐阅读