Hover & Click on overlapped SVG's

Question

I have a div with several SVG's textPaths that are overlapped with a position absolute. The problem is that I can hover and click in all of them in Google Chrome, but not in Safari (the FlowerAsAntenna & VegetalTheory are not clickable).

Safari seems to not be working with the pointer-events: none in the fill.

<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>

This is the Fiddle: https://jsfiddle.net/qznke9b6/

I really can't find a solution CSS/HTML related. But maybe there's a cheat code in JavaScript? Maybe Safari just doesn't support this SVG interactivity?

Thank you.

Answer 1

UPDATE (Temporary solution)

I could not find any correct solution, but I thought this was a nice idea and it actually works pretty well.

The idea is to play with the z-index all the time in 1 second so every path goes from z-index: 1 to z-index:6. Ever element has an own animation for that and a delay so there's never an element with the same value. I also added a css phrase hat makes the selected path have a z-index: 10.

This is the css:

    #home .path-1 {
    bottom: 10%;
    left: 5%;

    animation: safariSvgPatch 1s infinite;
    animation-delay: 0.66s;
}

#home .path-2 {
    right: 26%;
    bottom: -46%;

    animation: safariSvgPatch 1s infinite;
    animation-delay: 1.32s;
}

#home .path-3 {
    left: 5%;
    bottom: 7%;

    animation: safariSvgPatch 1s infinite;
    animation-delay: 1.98s;
}

#home .path-4 {
    left: -10%;
    bottom: -18%;

    animation: safariSvgPatch 1s infinite;
    animation-delay: 2.64s;
}

#home .path-5 {
    left: 55%;
    bottom: 8%;

    animation: safariSvgPatch 1s infinite;
    animation-delay: 3.3s;
}

#home .path-6 {
    left: 70%;
    bottom: 4%;

    animation: safariSvgPatch 1s infinite;
    animation-delay: 3.96s;
}

#home svg.path-selected { z-index: 10 !important}

@media (max-width: 1000px) {

    svg textPath {
        font-size: 31pt;
    }

    #home .path-1 {
        bottom: -4%;
        left: -50%;
    }

    #home .path-2 {
        right: 26%;
        bottom: -50%;
    }

    #home .path-3 {
        left: -110%;
        bottom: 10%;
    }

    #home .path-4 {
        left: -5%;
        bottom: -14%;
    }

    #home .path-5 {
        left: 30%;
        bottom: -10%;
    }

    #home .path-6 {
        left: 20%;
        bottom: 0%;
    }

}

@keyframes safariSvgPatch {
    /* Safari does not recognize the latests paths because of bounding boxes */
    0% { z-index: 1; }
    16.666% { z-index: 2; }
    33.333% { z-index: 3; }
    50% { z-index: 4; }
    66.666% { z-index: 5; }
    83.333% { z-index: 6; }
    100% { z-index: 1; }
  }