将图像放入 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 and/or 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/

将图像放入 Bootstrap SVG

Fitting images into Bootstrap SVGs

html

css

svg

twitter-bootstrap

bootstrap-5