如何在Bootstrap 5的SVG卡片占位符中替换rect为图片并保留上层文本

直接替换原有的<rect>标签为SVG原生<image>标签即可，不需要额外写clip path，完全保留原有尺寸、布局和上方文本，是当前场景的最优解。

修改后代码示例 #

<div class="col" data-aos="fade-up" data-aos-delay="200">
  <div class="card shadow-sm">
    <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
      <title>Placeholder</title>
      <!-- 替换原rect为image标签，尺寸和原rect完全一致 -->
      <image href="你的图片地址" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
      <!-- 原有text标签保留，天然层级在image上方，样式完全不变 -->
      <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
    </svg>

    <div class="card-body">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-outline-secondary">Learn More</button>
        </div>
      </div>
    </div>
  </div>
</div>

说明 #

• <image>标签的width="100%" height="100%"属性和原有rect尺寸完全匹配，不会改动卡片的现有布局
• 给<image>设置和外层SVG一致的preserveAspectRatio="xMidYMid slice"，可以保证图片按比例裁剪撑满整个区域，不会变形
• 原有<text>标签位置不变，在DOM结构上位于<image>之后，天然会显示在图片上层，原有样式不需要任何调整
• 外层SVG的所有Bootstrap原生类、宽高属性完全保留，和原有BS5卡片组件100%兼容，不会出现布局错位

内容的提问来源于stack exchange，提问作者YaddyVirus