Question

以下是SVG2 specification的一些相关摘录：

初始视口的宽度必须为width的值   outermost svg element上的演示文稿属性，除非   满足以下条件：


SVG内容是通过引用嵌入的单独存储的资源（例如HTML中的object元素），或者是 SVG内容   内嵌在包含文档中;

，并且引用元素或包含文档的使用CSS设置样式;

，并且在引用元素（例如object元素）或   包含足够的文档CSS-compatible positioning properties   确定视口的宽度。


在这些条件下，视口的宽度必须通过   定位属性。

[身高也一样]

outermost svg element

必须使用以下算法计算固有纵横比。如果算法返回null，则说明没有固有的宽高比。


如果width元素上的height和svg大小设置属性是   两个绝对值：

返回宽度/高度



如果 SVG视图处于活动状态：

让 viewbox 为活动SVG视图定义的视图框

返回 viewbox .width / viewbox .height



如果正确地指定了viewBox元素上的svg：

让 viewbox 为viewBox元素上的svg属性定义的viewbox

返回 viewbox .width / viewbox .height



返回空值

代码

我在svg中创建了一个汉堡包按钮，由于我们同时使用svg演示文稿属性和CSS进行了指定，因此我试图根据其视口的尺寸准确地确定发生了什么。

svg#ham-btn {
  margin: 2rem;
  border: 1px solid black;
  fill: #383838;
  width: 10vw;
  height: auto;
}

<svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn rect {
      transform-box: fill-box;
      transform-origin: 50% 50%;
      outline: 1px solid transparent;
      transition: transform 0.2s;
    }
    #ham-btn:hover #r2 {
      transform: translate(118%, 0);
    }
    #ham-btn:hover #r1 {
      transform: translate(0%, 191.66%) rotate(36deg) scaleX(1.1);
    }
    #ham-btn:hover #r3 {
      transform: translate(0%, -191.66%) rotate(-36deg) scaleX(1.1);
    }
    
  </style>
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
</svg>

问题

我的解决方案取决于视口比率（107.5 / 80）与viewBox比率（80/80）不同。这就是导致居中的原因（通过preserveAspectRatio）。如果更改视口的宽高比，则会破坏解决方案。

因此，我的问题是：为什么在CSS中设置尺寸与直接在svg中设置尺寸不同？为什么CSS的高度和宽度似乎不能覆盖SVG中指定的高度和宽度（如上面的第一个规范摘录指出的那样）。

我的最佳猜测

svg width / height表示属性定义了svg元素的固有长宽比（从上面的第二个摘录中可以看出）
然后，CSS完全覆盖该宽度和高度（从上面的第一个规范摘录中可以看出）
这说明了为什么有必要在CSS中将高度显式设置为auto。如果不这样做，svg的高度将回落到指定的80px，从而使形状变形

对这个猜测是否正确有任何想法吗？

自适应SVG-视口内在尺寸

0 个答案: