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 グラフィックスを使用してマスクしていますが、パスは使用していません。多分それが理由ですか?ありがとう