重叠SVG textPath在Safari中无法触发hover与点击事件的问题求助

我有一个包含多个采用绝对定位重叠SVG textPath的div，在Google Chrome中所有textPath均可正常触发hover和点击事件，但在Safari浏览器中，“Flower as an Antenna”和“Vegetal Theory”对应的textPath无法被点击。经排查发现Safari似乎不支持为fill设置pointer-events: none属性。

代码示例 #

<div id="home" style="overflow: hidden;">

  <svg class="path-2" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">

    <path id="path-2" d="m18.52,714.45S-100.46,101.25,264.79,16.18c452.75-128.93,318.75,560.07,1285.78,394.85" />

    <text x="0" y="0">
      <textPath href="#path-2" startOffset="0%" text-anchor="end">
        <a href="article.html">Flower as an Antenna Flower as an Antenna Flower as an Antenna Flower as an Antenna Flower as an Antenna Flower as an Antenna</a>
        <animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
      </textPath>
    </text>

  </svg>

  <svg class="path-1" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">

    <path id="path-1" d="m0,1080S36.26,69.47,480.52,317.43C937.07,572.25,1160.85,90.85,1220.61,0" />

    <text x="0" y="0">
      <textPath href="#path-1" startOffset="0%" text-anchor="end">
        <a href="article.html">Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory</a>
        <animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
      </textPath>
    </text>

  </svg>

  <svg class="path-3" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">

    <path id="path-3" d="m.02,1111.96s798.88,24.32,823.59-403.78C840.63,413.19,428.37,417.62,487.58.07" />

    <text x="0" y="0">
      <textPath href="#path-3" startOffset="0%" text-anchor="end">
        <a href="article.html">Plants Movement(s) in the Pan-Amazon Region Plants Movement(s) in the Pan-Amazon Region Plants Movement(s) in the Pan-Amazon Region</a>
        <animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
      </textPath>
    </text>

  </svg>

  <svg class="path-5" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">

    <path id="path-5" d="m10.55,1034.19s-91.79-372.35,279.57-512C594.42,407.76,583.66,222.53,467.53.23" />

    <text x="0" y="0">
      <textPath href="#path-5" startOffset="0%" text-anchor="end">
        <a href="article.html">Plant Conversations. Video Interview with Heraldo Vallejo Plant Conversations. Video Interview with Heraldo Vallejo</a>
        <animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
      </textPath>
    </text>

  </svg>

  <svg class="path-6" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">

    <path id="path-6" d="m.03,1034.27s227.53-12.95,339.36-244.14C451.77,557.81,183.34,337.96,457.02.31" />

    <text x="0" y="0">
      <textPath href="#path-6" startOffset="0%" text-anchor="end">
        <a href="article.html">Public Activities. Plants_Intelligence at Parliament of Plants Public Activities. Plants_Intelligence at Parliament of Plants</a>
        <animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
      </textPath>
    </text>

  </svg>

  <svg class="path-4" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">

    <path id="path-4" d="m.04.5s780.98,55.67,821.92,798.99" />

    <text x="0" y="0">
      <textPath href="#path-4" startOffset="0%" text-anchor="end">
        <a href="article.html">Amaranth. Malezas, Unkräuter, Weeds. Plants as political agents in colonized America Amaranth. Malezas, Unkräuter, Weeds. Plants as political agents in colonized America</a>
        <animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
      </textPath>
    </text>

  </svg>
</div>

我尝试了CSS/HTML相关方案但未找到解决办法，想询问是否有JavaScript的解决思路，或是Safari本身不支持该SVG交互特性？

内容的提问来源于stack exchange，提问作者a.tr.a.tr.a.tr