爲什麼我的圖像變成負面使用SVG蒙版

Question

我有一個正方形或矩形的正常原始圖像。我想要的是在蛋糕上放一個蛋形橢圓形的面具。

它需要作爲交叉瀏覽器兼容，因爲它可以。因此，我使用此方法的所有其他方法的交叉驗證較少。

問題

我得到一個負面形象。我嘗試使用白色的形狀和黑色的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

我屏蔽圖片

Answer 1

• 你混了面具的形象，所以交換它們。

• 此外面具需要倒置，即你想在黑色背景上的白色橢圓形。