javascript - 将 SVG 元素放在 img 标签上

Question

如何在 html 上放置 svg 元素（矩形、圆形等）。这是我的编码。谁能帮忙。

<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> 

Answer 1

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> 

Answer 2

您可以根据需要为元素赋予 position: fixed 或 position: absolute 的样式。

<div id="myImgId" style="width: 200px; height: 200px; background:#000;" onmousedown="doSomething()" onmouseup="return false;">
<img style="position:fixed;" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/domestic-cat_516_600x450.jpg" width="200" height="200" />
    <svg style="position:fixed;top:50px" id="svgOne" width="200" height="200"><rect width="100%" height="100%" fill="red"/></svg>
</div> 

请注意，外部<svg>元素的 x 和 y 属性将被忽略。您需要使用顶部和左侧样式来定位它，就像放置 html 元素一样。