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