是否可以允许在 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 对象放在其顶部的场景。