Блог

Итак, я создаю веб-страницу с помощью 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 .

Теперь я знаю, что для отображения изображений внутри an svg вам нужно определить a, clip path используя нужную вам форму, но, похоже, это было написано для лучшей реализации.

Может ли кто-нибудь указать, как я могу поместить изображение в rect или на его место без каких-либо изменений размеров и при этом сохранить отображаемый текст?

Вы можете просто использовать <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/