SVGの背景を介したマウスイベントの受け渡し

2つのSVG要素があり、それぞれが画面全体をカバーしています。SVGの背景を介したマウスイベントの受け渡し

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<body> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect> 
 
    </svg> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect> 
 
    </svg> 
 
</body>

正方形が重複していないにもかかわらず、緑の四角でSVGが画面全体をカバーし、すべてのクリックイベントを取得するので、イベントをクリックすると、赤の広場に渡されることはありません。同じSVGに参加することなく、これらの四角形の両方でクリックイベントを表示する方法はありますか？

How can I pass ONLY clicks through a SVG with pointer-events?のような解決策は、赤い四角形にクリックイベントを渡す際に効果的ですが、緑色の四角形のすべてのイベントを破棄しても問題ありません。

出典

2017-10-02 Robert Lord

ポインタイベントだけをsvgタグに追加してください。そして、svgの中にある他のすべてに、ポインタイベントのautoを追加します。親svgタグではなく、svg内の要素のみをクリック可能にします。

クロムに含まれています。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    pointer-events:none; 
 
} 
 
svg *{ 
 
    pointer-events:auto; 
 
}

<body> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect> 
 
    </svg> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect> 
 
    </svg> 
 
</body>

出典

2017-10-02 23:35:45 joopmicroop

別のSVG要素を使用してSVG要素をラップします。これがなぜ機能するかhereを参照してください。<svg>要素が一番外側にない場合、ポインタイベントのターゲットにすることはできません。一番外側はHTMLコンテキストの一部なので、<div>のように動作します。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<body> 
 
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <svg width="100%" height="100%"> 
 
     <rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect> 
 
    </svg> 
 
    <svg width="100%" height="100%"> 
 
     <rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect> 
 
    </svg> 
 
    </svg> 
 
</body>

出典

2017-10-02 23:51:29 ccprog

面白いからくり – joopmicroop

SVGの背景を介したマウスイベントの受け渡し

答えて

関連する問題