所以我正在使用 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.
現在我知道為了在 a 中顯示影像，svg您需要clip path使用您想要的形狀來定義 a ，但這看起來是為了更好的實作而撰寫的。
誰能指出我如何rect在不更改尺寸的情況下將影像放置在其位置或位置，并且仍然保留顯示的文本？
uj5u.com熱心網友回復：
您可以簡單地使用<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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312322.html
標籤：html css 推特引导 svg bootstrap-5