javascript - 堆叠的 svg 中的外来对象或对象标签未在 Safari 中注册点击

Question

我在嵌入 SVG 的 SVG 中的按钮方面遇到了困难。我在模拟物理设备时使用了这种奇怪的配置，不需要响应能力，并且为各个 SVG 中的不同部分分离代码降低了复杂性。

这在 Chrome 和 Firefox 上效果很好，但在 Safari 中，即使找到了对象，点击也不会注册，并且附加了一个事件侦听器。

因为即使网站通过对象标签嵌入到 HTML 中，我也可以从 main.svg 调用警报，所以我得出结论，对象标签不能负责。

这是我的问题的一个非常简化的版本。单击绿色矩形时，我想在 second.svg 上调用警报。粉红色区域的警报与 main.svg 上的一样。

主要.svg：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1920" height="1080" viewBox="0 0 508 285.75" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <g
     id="layer1">
    <rect style="fill:#ff9393;fill-rule:evenodd;stroke-width:0.283084;stroke-miterlimit:10;fill-opacity:1" id="rect1048" width="508" height="285.75" x="0" y="0" />
    <foreignObject width="190.6078" height="244.0815" x="26.305603" y="22.424448" requiredExtensions="http://www.w3.org/1999/xhtml">
      <xhtml:body>
        <xhtml:object
           width="100%"
           type="image/svg+xml"
           data="/second.svg" />
      </xhtml:body>
    </foreignObject>
  </g>
  <script>
     document.getElementById("rect1048").addEventListener("click", () => {
      alert("this works on safari"); // this works in safari
     });
  </script>
</svg>

第二个.svg：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1920" height="1080" viewBox="0 0 508 285.75" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2" />
  <g
     id="layer1">
    <rect style="fill:#008000;fill-rule:evenodd;stroke-width:0.283084;stroke-miterlimit:10;fill-opacity:1" id="rect1048" width="508" height="285.75" x="0" y="0" />
  </g>
  <script>
     document.getElementById("rect1048").addEventListener("click", () => {
      alert("this message is what I want called from here if possible"); // this doesnt work in safari
     });
  </script>
</svg>

任何帮助或任何指针将不胜感激。此外，如果需要任何澄清，请继续询问。我对编程和这个平台还是陌生的。

标签： javascripthtmlsvg