您好我是svg面具新手,我遇到以下问题:
圆圈是一个svg蒙版,它跟随光标在图像上。 在图像后面是另一个带有tagcloud的图像,它是一个透明背景的png。
现在我只想看到背后的图片中没有黄色的文字 网站的背景。这可能吗?如果有人可以帮助我,我会很高兴。
以下是演示中的代码:
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");
}
这就是我想要的:
答案 0 :(得分:1)
将原始图像粘贴在所有内容之后。
请注意我是如何调整你的getElementsByTagName以适应的,因为我很懒,但是如果你想要选择一个id并将其转换为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);
&#13;
body {
background-color: yellow;
}
svg {
width: 1600px;
height: 700px;
}
image:hover {
mask: url("#cursorMask");
}
&#13;
<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>
&#13;