时间戳

首页 > 解决方案 > 为什么“使用”标签大小与它引用的 svg 元素不匹配？

html - 为什么“使用”标签大小与它引用的 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 的大小不同？另外，可以做些什么来覆盖这种行为吗？谢谢。

标签： htmlcsssvg

解决方案

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

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

  • 对于<svg>，该viewBox区域拟合在 和 定义的width框内height。
  • 对于<use>，为viewBox定义的区域<symbol>安装在由x、y和定义width的框内。height<use>

对于两者，如果没有viewBox给出，内容将保持原始大小。缺失x或y默认为 0。缺失width或height默认为 100%。百分比是相对于视口定义的，即下一个外部的 viewBox 的<svg>大小（或 svg 本身的大小，如果它缺失）。

相反，如果<svg>是 HTML 页面中的最外层，width并且height是默认值为 的表示属性auto。它们在 CSS 级联中解决，并遵循其内联块元素的规则。如果找不到具体大小，则默认对象大小为 300px * 150px：

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

推荐阅读