將SVG元素放在img標記上

如何在html上放置svg元素（矩形，圓等）。這是我的編碼。任何人都可以幫忙將SVG元素放在img標記上

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

來源

2013-05-30 chiyango

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

來源

2013-05-30 17:43:59

你可以給元素的位置樣式：固定或立場：絕對取決於你的需求。

<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元素一樣。

來源

2013-05-30 17:48:47

將SVG元素放在img標記上

回答

相關問題