自适应SVG-视口内在尺寸

时间:2018-12-10 18:43:31

标签: html css svg

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

8.3. The initial viewport

  

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

     
      
  • SVG内容是通过引用嵌入的单独存储的资源(例如HTML中的object元素),或者是 SVG内容   内嵌在包含文档中;
  •   
  • ,并且引用元素或包含文档的使用CSS设置样式;
  •   
  • ,并且在引用元素(例如object元素)或   包含足够的文档CSS-compatible positioning properties   确定视口的宽度
  •   
     

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

     

[身高也一样]

outermost svg element

  

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

     
      
  1. 如果width元素上的heightsvg大小设置属性是   两个绝对值:      
        
    1. 返回宽度/高度
    2.   
  2.   
  3. 如果 SVG视图处于活动状态:      
        
    1. viewbox 为活动SVG视图定义的视图框
    2.   
    3. 返回 viewbox .width / viewbox .height
    4.   
  4.   
  5. 如果正确地指定了viewBox元素上的svg:      
        
    1. viewbox viewBox元素上的svg属性定义的viewbox
    2.   
    3. 返回 viewbox .width / viewbox .height
    4.   
  6.   
  7. 返回空值
  8.   

代码

我在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,从而使形状变形

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

0 个答案:

没有答案