Place Svg Element Over Img Tag

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

Solution 1:

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

<divid="myImgId"style="width: 200px; height: 200px; background:#000;"onmousedown="doSomething()"onmouseup="return false;"><imgsrc="Chrysanthemum.jpg"width="200"height="200"style="position:absolute;"/><svgid="svgOne"y="200"width="200"height="200"style="position:absolute; left:90px; top:90px;"><pathfill="#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>

Solution 2:

You can give the elements a style of position: fixed or position: absolute depending on your needs.

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

Note that the x and y attributes of outer <svg> elements are ignored. You'd need to use top and left styles to position it just as you would a html element.

Share