1

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 オブジェクトを配置できるようにする必要があるため、受け入れられる解決策ではありません。

4

0 に答える 0