如何防止 SVG 元素在浏览器中调整大小？

Question

下面是我已经多次遇到的问题的屏幕截图，我已经忽略了这个问题，但现在它有点困扰我。

该片段的相关代码是

.container {
  width: 200px;
}
.labelContainer {
  display: flex;
  flex-direction: row;
  margin-right: 48px;
}
.label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div>
  <a href="#" class="labelContainer">
    <span class="label">Super Transporter Company 3000 Ltd.</span>
    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" style="width:24px !important;">
      <path d="M10,17L15,12L10,7V17Z"></path>
    </svg>
  </a>
</div>
<div class="container">
  <a href="#" class="labelContainer">
    <span class="label">Super Transporter Company 3000 Ltd.</span>
    <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" style="width:24px !important;">
      <path d="M10,17L15,12L10,7V17Z"></path>
    </svg>
  </a>
</div>

为什么会出现这种情况？如何防止 SVG 元素调整大小？

Answer 1

浏览器将min-width和min-heightforsvg元素设置"auto"为默认。因此，当它渲染您svg并发现您尚未设置 时min-width，它将尽可能缩小它以适应更多文本。

所以你必须min-width为svg元素设置属性。