0

マウスオーバーのようなイベントをマスクにアタッチする方法はありますか? この例は私の問題を示しています: http://goo.gl/DRhsH

マウスを青いボックスの隣に渡すと、マスクの色が変わります。私がやりたいことは、マウスが青いボックスを通過したときにそのイベントを呼び出すことです (近くではありません - これは、青と赤のボックスが原因で発生します)別の四角形でマスクされており、マウスをそれらの近くに渡すと）、表示された画像のみを操作する必要があり、そのようなイベントをバインドすると問題が解決するはずです。

クリック/マウスオーバーをグループにバインドしようとしましたが、同じ結果が維持され、表示された部分だけでなく、画像全体にアクセスできます。私もそれをクリップしようとしましたが、クリップされたコンテンツを追跡し続けます

4

1 に答える 1

0

編集：物事が不適切に行われたため、前の回答を置き換えました。bonsaijsは明らかにクリッピングを許可しません。

マスク パスをクリップ パスとしても使用することをお勧めしますが、bonsiajs はそれをサポートしていないようです。とにかく、これは意図したとおりにイベントをトリガーする SVG 構造です。これが bonsaijs を使用して生成できない場合は、別の方法で生成できる可能性があります。

<svg width="596" height="596" viewBox="-0.5 -0.5 596 596" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="mask">
      <path d="M 0 0 l 50 0 l 0 150 l -50 0 Z" fill="rgba(255,255,0,1)"
        transform="matrix(1,0,0,1,80,0)" id="maskPath"/>
    </mask>
    <clipPath id="clipPath">
      <use xlink:href="#maskPath"/>
    </clipPath>
  </defs>
  <g>
    <g mask="url(#mask)" clip-path="url(#clipPath)" onmouseover="alert('in')">
      <path d="M 0 0 l 100 0 l 0 100 l -100 0 Z" fill="rgba(255,0,0,1)"/>
      <path d="M 0 0 l 100 0 l 0 100 l -100 0 Z" fill="rgba(0,0,255,1)"
        transform="matrix(1,0,0,1,50,50)"/>
    </g>
  </g>
</svg>
于 2012-12-14T13:54:31.800 に答える