为什么我的图像变成负面使用SVG蒙版

我有一个正方形或矩形的正常原始图像。我想要的是在蛋糕上放一个蛋形椭圆形的面具。为什么我的图像变成负面使用SVG蒙版

它需要作为交叉浏览器兼容，因为它可以。因此，我使用此方法的所有其他方法的交叉验证较少。

问题

我得到一个负面形象。我尝试使用白色的形状和黑色的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

我屏蔽图片

来源

2016-08-02 Paul

Thanks @Robert Longson就是这样！ – Paul

你混了面具的形象，所以交换它们。
此外面具需要倒置，即你想在黑色背景上的白色椭圆形。

来源

2016-08-02 13:45:08

为什么我的图像变成负面使用SVG蒙版

回答

相关问题