Fitting images into Bootstrap SVGs-CodePudding

So I'm building a webpage with Bootstrap 5 and one of the elements I'm using (from BS5 templates) is this

    <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>

As you can see, there's an svg tag up there with a rect inside. I want to display an image in place of the rect (or inside it, just need it to be same dimension as the rect) while keeping the text that's currently showing over said rect.

Now I know that in order to display images inside an svg you need to define a clip path using the shape you want but this looks like it was written for a better implementation.

Can anyone point out how I can put an image in the rect or in its place without any changes to the dimensions and still keep the text that shows over?

CodePudding user response：

You could simply use the <image> tag, by setting width and/or height as 100% - image would fill the whole container area.

<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/

You could also play with width and height of the image like height: 100%

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