4

SVG 要素で画像をマスクする必要があります。ページに非常に詳細なインライン SVG 要素があり、読み込まれる画像のマスクとして使用したいと考えています。私の SVG は<path>. この例http://jsfiddle.net/pjgalbraith/cnLHE/に似たものにしたいと思います。*この例は Chrome や IE9 では機能しないことに気付きましたが、FF のみです。

これが私の基本構造です。

  <div>
     <svg width="500" height="500">
        <mask id="myMask'>
           <g>
              <path/>
           </g>
        </mask>
     </svg>
     <img src="http://myImage.jpg" style="mask:url(#myMask);">
  </div>

<mask>group をラップする SVG 内にタグを追加しようとしましたが、うまくいきませ<g>んでした。

ただし、これにより SVG グラフィックが完全に透明になるため、機能しようとしており、SVG がマスクとして機能していると思いますが、画像はまったくマスクされておらず、位置をオーバーレイするだけです。またはそのようなものの中にいる<img>必要があり<svg>ますか?

誰も SVG の経験があり、これを行う方法を知っていますか? 私が目にするすべての例では、単純な rect または svg グラフィックスを使用してマスクしていますが、パスは使用していません。多分それが理由ですか?ありがとう

4

1 に答える 1