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 中的错误吗？点击事件在包括 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 版中修复。