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>