私が開発しているウェブページには少し問題があります。SVGを使用したWebkitマスク
私は.SVGファイルを使用して画像の一部をマスクします。
これは、Firefox、Safariで正常に動作するだけで、私は理由を理解したいOS Xの
下Chromeで動作しますか？何か案は ？ここで
は、私は同じ問題を抱えて例のページです：事前にhttp://girliemac.com/sandbox/mask.html
おかげで、
Jk_
は、このようなさまざまな値を試して試してみてください：
-webkit-mask-box-image: url(svg/twitter-bird-new.svg) 100 100 0 0 round round;
らしいですスケーリングと関係があるようです。どうして？それはまだ実験段階にあるからです。
出典：https://developer.mozilla.org/en/CSS/-webkit-mask-box-image
ありがとう！それはまだ実験的な権利です。しかし、私は画像をマスキングするための最良のブラウザソリューションを見つけることを試みています。 border-radiusを使用すると、Chromeでエラーが発生するため、SVGについて考えます。私はキャンバスマスキングで試してみるつもりです。乾杯。 –
これは良いように見えますが、ChromeであなたjQuerify場合とすると、ヒットテストを実行します。
$(".avatar").on("click", function(){ console.log("works!");});
あなたは私が何をとにかくために...ボックスの残りの部分をクリックすることができますこのような何かとUNDERNEATHをクリックすることができますか？私は円をマスクするようにしています...しかし、私は上の円をクリックしたくありません...私は下のものをクリックしたい..あなたが四半期の上に一握りを持っている場合などトレイのような大きなコインの端を見ることができます...
埋め込みSVGではなくSVGファイルをクリップできる理由は何ですか？代わりに 'url（＃twitter-bird）'を使ったとします。それがうまくいく方法はありますか？ – bozdoz