将SVG元素放在img标记上 [英] Place SVG element over img tag

问题描述

如何在html上放置svg元素（rect，circle等）。这是我的编码。任何人都可以帮忙。

How to place svg element(rect, circle, etc.,) over html. This is my coding. can anyone help.

<div id="myImgId" style="width: 200px; height: 200px; background:#000;" onmousedown="doSomething()" onmouseup="return false;">
<img src="Chrysanthemum.jpg" width="200" height="200" />
<svg id="svgOne" y="200" width="200" height="200"></svg>
</div> 

推荐答案

JSFIDDLE： http://jsfiddle.net/nsgch/

JSFIDDLE: http://jsfiddle.net/nsgch/

<div id="myImgId" style="width: 200px; height: 200px; background:#000;" onmousedown="doSomething()" onmouseup="return false;">
   <img src="Chrysanthemum.jpg" width="200" height="200" style="position:absolute;"/>

   <svg id="svgOne" y="200" width="200" height="200" style="position:absolute; left:90px; top:90px;">
      <path fill="#014da2" d="M16,1.466C7.973,1.466,1.466,7.973,1.466,16C1.466,24.027,7.973,30.534,16,30.534C24.027,30.534,30.534,24.027,30.534,15.999999999999998C30.534,7.973,24.027,1.466,16,1.466Z"></path>
   </svg>
</div> 

这篇关于将SVG元素放在img标记上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！