hello i'm new svg masks , have following problem:
the circle svg mask follows cursor on image. behind image image tagcloud png transparent background.
now want see text image behind without yellow background website. possible? happy if me.
here code demo:
https://jsfiddle.net/ayyuqrw4/1/
<svg> <defs> <mask id="cursormask" maskunits="objectboundingbox" maskcontentutils="objectboundingbox"> <g> <rect x="0" y="0" width="1600" height="700" fill="#ffffff" /> <circle cx="0" cy="0" r="60" stroke="black" stroke-width="0" fill="black" fill-opacity="1" /> </g> </mask> </defs> <image width="1600" height="700" xlink:href="https://41.media.tumblr.com/e91c999c320c29a28053c6a933da1e81/tumblr_mkjnibe1xh1s9yt1no1_500.png" /> <image width="1600" height="700" xlink:href="http://www.liftopia.com/media/product/275/102102_ski-banff-lake-louise-sunshine-1-day-lift-tickets.jpg" /> </svg> var img = document.getelementsbytagname("image")[1]; var imgpos = img.getboundingclientrect(); var imgx = imgpos.left; var imgy = imgpos.top; var rect = document.getelementsbytagname("circle")[0]; var recthalfwidth = rect.getattribute("width") / 2; var recthalfheight = rect.getattribute("height") / 2; img.addeventlistener("mousemove", function (e) { rect.setattribute("cx", e.clientx - imgx - recthalfwidth); rect.setattribute("cy", e.clienty - imgy - recthalfheight); }, false); body { background-color: yellow; } svg { width: 1600px; height: 700px; } image:hover { mask: url("#cursormask"); } and here want:
stick original image behind everything.
note how i've adjusted getelementsbytagname fit because i'm lazy better if gave image want select id , converted getelementbyid.
var img = document.getelementsbytagname("image")[2]; var imgpos = img.getboundingclientrect(); var imgx = imgpos.left; var imgy = imgpos.top; var rect = document.getelementsbytagname("circle")[0]; var recthalfwidth = rect.getattribute("width") / 2; var recthalfheight = rect.getattribute("height") / 2; img.addeventlistener("mousemove", function (e) { rect.setattribute("cx", e.clientx - imgx - recthalfwidth); rect.setattribute("cy", e.clienty - imgy - recthalfheight); }, false);body { background-color: yellow; } svg { width: 1600px; height: 700px; } image:hover { mask: url("#cursormask"); } <svg> <defs> <mask id="cursormask" maskunits="objectboundingbox" maskcontentutils="objectboundingbox"> <g> <rect x="0" y="0" width="1600" height="700" fill="#ffffff" /> <circle cx="0" cy="0" r="60" stroke="black" stroke-width="0" fill="black" fill-opacity="1" /> </g> </mask> </defs> <image width="1600" height="700" xlink:href="http://www.liftopia.com/media/product/275/102102_ski-banff-lake-louise-sunshine-1-day-lift-tickets.jpg" /> <image width="1600" height="700" xlink:href="https://41.media.tumblr.com/e91c999c320c29a28053c6a933da1e81/tumblr_mkjnibe1xh1s9yt1no1_500.png" /> <image width="1600" height="700" xlink:href="http://www.liftopia.com/media/product/275/102102_ski-banff-lake-louise-sunshine-1-day-lift-tickets.jpg" /> </svg>
Comments
Post a Comment