はなぜ私のイメージは、私は、正方形や長方形であり、通常、元の画像を持っている

Question

マスク負使ってSVGになっています。私が欲しいのはそのマスクとして機能するようにその上に卵形の楕円を配置することです。

それはそれができるよう互換性crossbrowserようにする必要があります。したがって、私は他のすべてのメソッドの下でこのメソッドを使用しているより少ないcrossbrowserの証明です。

問題

私は否定的なイメージを取得しています。私は白い形と黒い形の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

• あなたはマスクと画像をアップミキシングしています、だからスワップする。

• はまた、マスクを使用すると、黒の背景に白の楕円形をしたい、すなわち反転させる必要があります。