为什么我的图像使用 SVG 蒙版变成负片答案

【问题标题】：Why is my image turned into negative using SVG mask为什么我的图像使用 SVG 蒙版变成负片
【发布时间】：2016-12-07 21:09:56
【问题描述】：

我有一个正方形或矩形的普通原始图像。我想要的是在它上面放置一个蛋形椭圆作为它的面具。

它需要尽可能地兼容跨浏览器。因此，我在所有其他方法的跨浏览器证明较少的情况下使用此方法。

问题

我得到一个负面形象。我尝试使用白色形状和黑色形状的 png。面具，但没有运气。我试图找到一个生成器，这样我就可以上传一个蛋形的 svg，但还是没有成功。

<svg width="150" height="150" baseProfile="full" version="1.2">
    <defs>
        <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
            <image width="150" height="150" xlink:href="/website_url/FullSizeRender-150x150.jpg" />
        </mask>
    </defs>
    <image id="the-mask" mask="url(#svgmask2)" width="150" height="150" y="0" x="0" xlink:href="/website_url/img/clippath_mask.png" />
</svg>

工作（半工作）示例： js Fiddle right here

我的蒙版图像

【问题讨论】：

谢谢@Robert Longson 就是这样！

标签： html css svg svg-filters

【解决方案1】：

您正在混淆遮罩和图像，因此请交换它们。
还需要反转蒙版，即您想要黑色背景上的白色椭圆形。

【讨论】：