如何设置内联SVG的宽高？为何我的场景中不生效？

针对你遇到的内联SVG设置宽高无效的情况，可通过以下几种方式解决：

方法1：用CSS样式强制控制宽高（优先级更高） #

直接给引用symbol的SVG元素添加自定义类，通过CSS设置宽高，避免被Bootstrap的默认样式或布局规则覆盖：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .checkmark-icon {
    width: 24px;
    height: 24px;
    display: inline-block; /* 确保宽高生效，避免inline元素的布局限制 */
    align-self: center; /* 在flex布局中垂直居中，防止被拉伸变形 */
  }
</style>

<svg style="display: none">
  <symbol id="checkmark" viewBox="0 0 24 24">
    <path stroke="#6CB21F" fill="#6CB21F" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
  </symbol>
</svg>
<div style="max-width:200px;">
  <div class="card shadow w-100 border-info mb-5 rounded-lg">
    <div class="card-body pt-0">
      <ul class="price-benefits list-unstyled">
        <li class="d-flex flex-row mb-3"><svg class="checkmark-icon mr-2"><use href="#checkmark"></use></svg> Test Test Test Test Test Test Test Test Test Test</li>
        <li class="d-flex flex-row mb-3"><svg class="checkmark-icon mr-2"><use href="#checkmark"></use></svg> Test</li>
        <li class="d-flex flex-row mb-3"><svg class="checkmark-icon mr-2"><use href="#checkmark"></use></svg> Test Test Test Test Test Test Test Test Test Test</li>
        <li class="d-flex flex-row mb-3"><svg class="checkmark-icon mr-2"><use href="#checkmark"></use></svg> Test</li>
      </ul>
    </div>
  </div>
</div>

方法2：调整SVG元素的display属性 #

如果是inline布局导致宽高不生效，给SVG添加display: block或inline-block样式，同时保留inline的width/height属性：

<svg height="24" width="24" class="mr-2" style="display: inline-block; align-self: center;"><use href="#checkmark"></use></svg>

方法3：规避flex布局的拉伸影响 #

你的列表项使用了d-flex布局，SVG可能被容器拉伸变形，可通过以下CSS规则稳定尺寸：

.checkmark-icon {
  flex-shrink: 0; /* 禁止SVG在flex容器中被压缩 */
}

关键原因说明 #

• 使用<use>引用<symbol>时，SVG的宽高属性可能被父flex容器或Bootstrap默认样式覆盖，导致inline属性优先级不足。
• 设置display: inline-block能解除inline元素的布局限制，让宽高属性正常生效。
• CSS类样式的优先级高于inline属性，能更可靠地控制SVG尺寸。

内容的提问来源于stack exchange，提问作者Philipp S.