将图像放入 Bootstrap SVG

Question

所以我正在使用 Bootstrap 5 构建一个网页，我正在使用的元素之一（来自 BS5 模板）是这个

    <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 width="100%" height="100%" fill="#55595c"/><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>

如您所见，上面有一个svg 标签，里面有一个rect。我想在rect 的位置显示一个图像（或在其中，只需要它与rect 的尺寸相同），同时保留当前显示在rect 上的文本。

现在我知道，为了在 svg 中显示图像，您需要使用所需的形状定义 clip path，但这看起来是为了更好地实现而编写的。

谁能指出我如何在不改变尺寸的情况下将图像放在rect 或其位置上并仍然保留显示的文本？

Answer 1

您可以简单地使用<image> 标签，将width 和/或height 设置为100% - 图像会填满整个容器区域。

 <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 width="100%" height="100%" fill="#55595c" />
      <image href="https://www.wpbeginner.com/wp-content/uploads/2018/12/svgnoqualityloss.png" width="100%"/>
      <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
    </svg>

JSFiddle：https://jsfiddle.net/rcuq7sLb/6/

你也可以像height: 100%这样调整图片的宽度和高度

JSFiddle：https://jsfiddle.net/rcuq7sLb/7/