title: Anchor href attribute in SVG not working on mobile browsers
body: <p>I have an encapsulated svg with a href a attribute link inside. Unfortunately the link does not work on most mobile browsers (Safari, Firefox, ect.) I tested on iPhone, iPad, LG phone, Samsung Galaxy Tablet.</p>
  
  <p>This is my code inside the HTML and inside the outer SVG:</p>
  
  <pre><code>&lt;svg width="400px" height="400px" font-size="55px" font-family="Open Sans" font-weight="bold"&gt;
  &lt;!--LINK EMBEDDED IN SVG--&gt;
    &lt;a href="https://www.nzz.ch" target="_blank" class="svg-link"&gt;
      &lt;text x="50%" y="50%" text-anchor="middle" fill="white"&gt;CLICKME&lt;/text&gt;
    &lt;/a&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Full code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
    &lt;div style="font-family:Open Sans;font-size:15px;padding:30px;position:absolute;"&gt;
      Test for text clickable on mobile
    &lt;/div&gt;
    &lt;svg width="600px" height="600px" fill-opacity="0.8"&gt;
      &lt;circle r="200" cx="300" cy="300" style="fill:#11db4d;"&gt;
      &lt;/circle&gt;
      &lt;g transform="translate(100,100)"&gt;
      &lt;svg width="400px" height="400px" font-size="55px" font-family="Open Sans" font-weight="bold"&gt;
        &lt;!--LINK EMBEDDED IN SVG--&gt;
        &lt;a href="https://www.nzz.ch" target="_blank"&gt;
          &lt;text x="50%" y="50%" text-anchor="middle" fill="white"&gt;CLICKME&lt;/text&gt;
        &lt;/a&gt;
      &lt;/svg&gt;
    &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Or here on jsfiddle: <a href="https://jsfiddle.net/sqhy8p15/2/" rel="nofollow noreferrer">https://jsfiddle.net/sqhy8p15/2/</a> I also tried to change the z-index and padding as suggested in the answers here <a href="https://stackoverflow.com/questions/38107006/make-an-html-svg-object-also-a-clickable-link-on-iphone#38223317">make an html svg object also a clickable link (on iphone)</a> but it did not work (<a href="https://jsfiddle.net/yau5wzrf/2/" rel="nofollow noreferrer">https://jsfiddle.net/yau5wzrf/2/</a>).</p>
  
  <p>Thanks for any help!</p>