在 plotly plot (SVG) 上叠加图像

Question

我在 div 中有一个图表，由 plotly（它是一个 SVG 元素）生成。我想在上面叠加一个图像，但我不知道该怎么做。我尝试将 div 上的背景图像 CSS 属性设置为图像，但它没有显示。有人知道我该怎么做吗？

Answer 1

简单叠加...

代码：

<div class="wrapper">
  <div class="ploty">
    <img src="http://placehold.it/500x300" />  <!-- This would instead be your chart -->
  </div>
  <img class="overlay" src="http://lorempixel.com/400/200/food/1/" />
</div>


.wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
}

这会将 img.overlay 定位在 div.wrapper 的左上角。您可以通过更改 top 和 left 属性的值将其放置在您想要的任何位置，如下所示：

.overlay {
  position: absolute;
  top: 20px;
  left: 50px;
}

在 plotly plot (SVG) 上叠加图像

Overlay image on top of plotly plot (SVG)

html

css

svg

plotly