如何在 SVG 占位符中插入图像？-解网

问：

这对我来说都是新的东西。我正在尝试使用 Bootstrap 模板名称“Carousel”作为我的基础。我正在使用 Bootstrap 5.3.2。

https://getbootstrap.com/docs/5.0/examples/carousel/

到目前为止一切都很好。但是我找不到任何关于如何在 SVG 占位符中放置我的个人圆形图像而不是灰色填充的文档。

请帮忙吗？我想要一个图像来替换那个灰色的 SVG 圆形占位符。

<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false">
        <title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect>
        <text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>

HTML CSS SVG 引导程序-5

customElements.define("svg-avatar", class extends HTMLElement {
  connectedCallback() {
    let id   = "id" + crypto.randomUUID();
    let href = "https://octodex.github.com/images/" + this.getAttribute("src");
    this.style.display = "inline-block";
    this.innerHTML     = `<svg viewBox="0 0 100 100">
      <defs>
        <pattern id="${id}" patternUnits="objectBoundingBox" height="100%" width="100%">
          <image href="${href}" width="100" height="100" preserveAspectRatio="xMidYMin slice"/>
        </pattern>
      </defs>
      <circle fill="url(#${id})" cx="50" cy="50" r="49" stroke="black"/>`;
  }
});

svg-avatar {
  width: 180px;
  background: rebeccapurple;
}

<svg-avatar src="original.jpg"></svg-avatar>
<svg-avatar src="saint_nictocat.jpg"></svg-avatar>
<svg-avatar src="grinchtocat.gif"></svg-avatar>

0赞 Aryan kholqi 11/18/2023 #2

SVG 文件支持图像标签以在 SVG 文件中嵌入图像：

<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg">
 <!-- Embedding an image -->
 <image xlink:href="PATH_TO_YOUR_IMG.png" width="400" height="300" />
</svg>

上一个：错误？嵌套的 CSS 供应商前缀会破坏 Chrome CSS 解析

下一个：FullCalendar - 删除议程视图中的时间轴？

如何在 SVG 占位符中插入图像？

How can I insert an image in a SVG placeholder?

评论