Safari不会在溢出的SVG内容上发出指针事件

Question

我正在尝试将单击事件添加到SVG元素中，该元素具有可见溢出和其中溢出SVG的形状元素（圆/路径）。

在Safari（9,10,11）上，单击事件在形状元素（圆/路径）溢出的区域中不起作用，而它在SVG中存在的区域中正常工作。

 var count = 0; function clickMe() { console.log("in click func"); count++; document.getElementById("counter").innerHTML = count; } 

 #counter { font-size: 2em; } #starSvg { pointer-events: auto; overflow: visible; position: absolute; left: 200px; top: 250px; border: 1px solid red; } #starPolygon { overflow: visible; fill: rgba(0, 153, 219, 1); pointer-events: visiblePainted; stroke-width: 4; stroke-linecap: square; stroke-linejoin: round; stroke: rgba(219, 0, 153, 1); cursor: pointer; shape-rendering: geometricPrecision } p { margin: 10px 0; } 

 <div> <p>Open this webpage on Chrome &amp; safari</p> <p>On Chrome: Click work on all four hands of the star.</p> <p>On Safari: Click works only on the hands inside the red area(SVG bounding Rect).</p> <p style="position: absolute; top: 100px; left: 200px;">Click Event Counter: <span id="counter">0</span> </p> <div class="containter"> <svg onclick="clickMe()" id="starSvg" width="100%" height="100%"> <g width="100%" height="100%" transform="" style="overflow: visible; transform: rotate(45deg) translate(0, 0);"> <polygon id="starPolygon" shape-rendering="geometricPrecision" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon> </g> </svg> </div> </div> 

这也是Safari中的一个错误吗？ click事件适用于所有浏览器，包括IE。

Answer 1

这反映了Webkit错误报告＃140723： https ：//bugs.webkit.org/show_bug.cgi ？ id = 140723

该错误报告链接到此codepen示例，再现了您找到的完全相同的结果： https ：//codepen.io/anon/pen/pvPQqY

正如我在下面描述的修复应用在这里：

https://codepen.io/anon/pen/YeOmGW

===========

为清晰起见编辑：证据很清楚，初始裁剪在最外侧视口（svg）边界生效，同时溢出属性允许在裁剪区域外的形状可见。 实际上渲染指针事件无效。

换句话说，剪辑是应用IAW的第一句话： http ：//w3.org/TR/SVG11/masking.html#AutoClipAtViewportNotViewBox，同时符合溢出规则（最后三个）： http： //w3.org/TR/SVG11/masking.html#OverflowAndClipProperties是Safari出现此问题的原因;

为了解决这个问题，OP必须创建一个包装器视口，以便为不一致的实现创建的困境创建（解决方法）解决方案。

这类似于添加包装所需内容可能需要的任何其他HTML结构。 （我真的专注于帮助解决问题）

希望这可以帮助。

 var count = 0; document.querySelector('svg').addEventListener('click',clickMe); function clickMe(e) { console.log("clicked on: " + e.target.id); count++; document.getElementById("counter").innerHTML = count; } 

 #counter { font-size: 2em; } #starSvg { pointer-events: auto; position: absolute; width: 100%; height: 100%; left:0; top:0; } #starPolygon { transform: translate(50%, 50%) rotate(45deg); fill: rgba(0, 153, 219, 1); stroke-width: 4; stroke-linecap: square; stroke-linejoin: round; stroke: rgba(219, 0, 153, 1); cursor: pointer; shape-rendering: geometricPrecision } #starClip { width: 100%; height: 100%; stroke-width: 1; stroke: red; fill: transparent; } p { margin: 10px 0; } 

 <div> <p>Open this webpage on Chrome &amp; safari</p> <p>On Chrome: Click work on all four hands of the star.</p> <p>On Safari: Click works only on the hands inside the red area(SVG bounding Rect).</p> <p style="position: absolute; top: 100px; left: 200px;">Click Event Counter: <span id="counter">0</span> </p> <div class="containter"> <svg id="starSvg"> <rect id="starClip" x="50%" y="50%"></rect> <g> <polygon id="starPolygon" x="0" y="0" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon> </g> </svg> </div> </div> 

Answer 2

似乎在Safari的11.1版本中得到修复。