如何防止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-height和svg设置为"auto"。因此，当它呈现您的svg并且看到您没有设置min-width时，它将尽可能缩小它以适合更多文本。

因此，您必须为min-width元素设置svg属性。