为什么'use'标签大小与它引用的svg元素不匹配？

但是,这不是我所看到的,如下面的截图所示:

这似乎不是浏览器错误,因为在Firefox,Edge和Chrome中复制了相同的行为.任何人都可以帮助解释为什么"使用"框与svg的大小不同？此外,可以做任何事情来覆盖这种行为？谢谢.

您需要为引用设置宽度和高度.

两个元件和/ /组合提供在另一个内部装配一个区域的机构:

因为,该viewBox区域安装在由width和定义的框内height.

为,所述viewBox用于定义的区域被装配限定的箱内x,y,width和height的.

对于两者,如果没有viewBox给出,则内容保持原始大小.缺失x或y默认为0.缺少width或height默认为100%.百分比是相对于视口定义的,即下一个外部视图框的大小(或svg本身的大小,如果缺少).

相反,如果它是HTML页面中的最外层,width并且height是具有默认值的表示属性auto.它们在CSS级联中解析,并遵循其内联块元素的规则.如果找到具体大小失败,则默认对象大小为300px*150px:

否则,如果height计算值为auto,但没有满足上述条件,则height必须将使用的值设置为最大矩形的高度,该矩形的比率为2:1,高度不大于150px,并且宽度不大于设备宽度.