Safari 5 ブラウザーで SVG タグの下にあるコントロールでの対話を許可することは可能ですか?
以下の jsfiddleは、firefox と chrome (win) では動作しますが、safari 5 (mac) では動作しません。
目に見えない四角形を使用して、Safari 5で問題を解決しようとしましたが、成功しませんでした。
コードは次のとおりです。
<div class='divC'>
<input type="text" name="input" value="Type here">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" >
<rect x="0" y="0" width="180" height="180" opacity='0' pointer-events="none" />
<rect x="50" y="50" width="50" height="50" />
<rect id='rc' x="50" y="120" width="50" height="50" />
</svg>
svg { border:solid 1px green; position:absolute; top:0px; left:0px; pointer-events:none;}
rect#rc {
fill: red;
pointer-events:visible;
}
rect#rc:hover {
fill: green;
}
SVG の下にあるテキスト ボックスを操作できるようにしたいのですが、可能ですか?
編集: z-index を使用して入力コントロールを上げることは、ユーザーが svg タグの下にあるコンテンツをスクロールできるようにする必要があるが、その上に svg オブジェクトを配置できるようにする必要があるため、受け入れられる解決策ではありません。