以下是SVG2 specification的一些相关摘录:
初始视口的宽度必须为
width
的值 outermost svg element上的演示文稿属性,除非 满足以下条件:
- SVG内容是通过引用嵌入的单独存储的资源(例如HTML中的
object
元素),或者是 SVG内容 内嵌在包含文档中;- ,并且引用元素或包含文档的使用CSS设置样式;
- ,并且在引用元素(例如
object
元素)或 包含足够的文档CSS-compatible positioning properties 确定视口的宽度。在这些条件下,视口的宽度必须通过 定位属性。
[身高也一样]
必须使用以下算法计算固有纵横比。如果算法返回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中指定的高度和宽度(如上面的第一个规范摘录指出的那样)。
我的最佳猜测
width
/ height
表示属性定义了svg元素的固有长宽比(从上面的第二个摘录中可以看出)auto
。如果不这样做,svg的高度将回落到指定的80px,从而使形状变形对这个猜测是否正确有任何想法吗?