G
G
Grosses2018-01-30 00:05:01
iPhone
Grosses, 2018-01-30 00:05:01

Why don't links inside svg work on iphone?

There is a code

<div class="slide">
      <svg viewBox="0 0 1000 650">
      <a href="/type-1-7/"class="appartement appartement-1" title="appartement 1">
        <path class="part" d="m 222.24741,331.12328 137.8018,5.04153 3.78114,106.29224 -39.07185,-3.78115 5.88179,-6.72204 -119.31619,-7.98242 24.78752,-17.22522 -10.08306,-1.68051 z"></path>
      </a>
      <a href="/type-2-8/"class="appartement appartement-2" title="appartement 2">
        <path class="part" d="m 577.67522,454.22062 44.11338,3.36102 1.26038,-7.5623 145.36409,10.08306 -8.40255,-24.36739 114.27466,8.40255 7.5623,-87.38651 -294.50933,-12.60382 -1.26039,85.28587 z"></path>
      </a>
      <a href="/type-3-9/" class="appartement appartement-3" title="appartement 3">
        <path class="part" d="m 216.27057,238.84826 151.50822,2.3766 -14.25959,6.53565 4.15905,6.53565 2.37659,84.96344 -137.84277,-4.7532 z"></path>
      </a>
      <a href="/type-4-10/"class="appartement appartement-4" title="appartement 4">
        <path class="part" d="m 591.11929,247.09779 -3.78114,97.04944 294.50933,12.60382 8.40254,-106.29224 z"></path>
      </a>
      <a href="/type-5-11/"class="appartement appartement-5" title="appartement 5">
        <path class="part" d="m 216.78575,244.1569 138.64206,2.10064 15.54471,-7.98242 15.12459,-97.04944 289.4678,-0.42012 -51.67568,-53.776316 -0.84025,6.301912 -27.72841,-0.840255 -0.42013,-14.70446 -163.00944,1.680509 -3.78115,13.864206 -28.14854,0.420127 -57.97758,47.894527 -88.64689,-0.42013 -36.55109,91.58778 -5.46165,1.26038 z"></path>
      </a>
      <a href="/type-6-12/"class="appartement appartement-6" title="appartement 6">
        <path class="part" d="m 579.77585,240.37576 8.82268,-98.30982 288.20742,-1.68051 18.4856,105.87211 z"></path>
      </a>
      </svg>
      <img class="map" src="img.png">
    </div>

On desktop everything is fine, it scales fine on mobile. But on iPhones, link areas don't work. Everything is fine on android. Help!
UPD. On desktops, there is a hover effect on links. But I don't think he has anything to do with it.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
ink, 2018-01-30
@Grosses

so the link in svg is written differently, like this:

<a xlink:href= "http://example.com/"'>
  <text x="10" y="25" >An example link.</text>
</a>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question