为什么'use'标签大小与它引用的svg元素不匹配？
查看下面的代码片段,我希望"use"引用的svg元素被限制在100px宽和100px高的框中:
body {
background: blue;
}
.svgautohide {
display: none;
}<body>
<div style="height:100px;background:red">
<svg><use xlink:href="#icontest"></use></svg>
</div>
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="svgautohide">
<defs>
<symbol id="icontest">
<rect x="0" y="0" width="100" height="100" />
</symbol>
</defs>
</svg>
</body>但是,这不是我所看到的,如下面的截图所示:
这似乎不是浏览器错误,因为在Firefox,Edge和Chrome中复制了相同的行为.任何人都可以帮助解释为什么"使用"框与svg的大小不同？此外,可以做任何事情来覆盖这种行为？谢谢.
您需要为引用设置宽度和高度<svg>.
两个<svg>元件和<symbol>/ <use>/组合提供在另一个内部装配一个区域的机构:
- 因为
<svg>,该viewBox区域安装在由width和定义的框内height. - 为
<use>,所述viewBox用于定义的区域<symbol>被装配限定的箱内x,y,width和height的<use>.
对于两者,如果没有viewBox给出,则内容保持原始大小.缺失x或y默认为0.缺少width或height默认为100%.百分比是相对于视口定义的,即下一个外部视图框<svg>的大小(或svg本身的大小,如果缺少).
相反,如果它<svg>是HTML页面中的最外层,width并且height是具有默认值的表示属性auto.它们在CSS级联中解析,并遵循其内联块元素的规则.如果找到具体大小失败,则默认对象大小为300px*150px:
否则,如果
height计算值为auto,但没有满足上述条件,则height必须将使用的值设置为最大矩形的高度,该矩形的比率为2:1,高度不大于150px,并且宽度不大于设备宽度.