Question

看看下面的代码片段，我希望“ 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大小不同？另外，可以采取任何措施来替代此行为吗？谢谢。

Answer 1

您需要为引用<svg>设置宽度和高度。

<svg>元素和<symbol> / <use> /组合都提供了一种将一个区域拟合到另一个区域的机制：

对于<svg>，viewBox区域位于width和height定义的框中。
对于<use>，为viewBox定义的<symbol>区域位于x，y，width和height中的<use>。

对于两者，如果都未提供viewBox，则内容将保持原始大小。丢失的x或y默认为0。丢失的width或height默认为100％。相对于视口定义了百分比，即下一个外部<svg>的viewBox的大小（或svg本身的大小，如果缺少的话）。

相反，如果<svg>在HTML页面的最外面，则width和height是表示属性，默认值为auto。它们在CSS级联中并遵循其rules for inline-block elements进行解析。如果找不到具体尺寸，则默认对象尺寸为300px * 150px：

否则，如果height的计算值为auto，但没有满足上述任何条件，则必须将height的使用值设置为最大的高度。比率为2：1的矩形，高度不大于150px，宽度不大于设备宽度。

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

1 个答案: