SVG 蒙版透明圆圈 - 仅显示没有黄色背景的文本

Question

您好，我是 svg 蒙版的新手，遇到以下问题：

圆圈是一个 svg 蒙版，跟随光标在图像上。 图片后面是另一张带有标签云的图片，它是一个透明背景的 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");
}

这就是我想要的：

Final Result

Answer 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);

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>