links in svg tag not working when image and svg made to 100% in html

Question

i have an image file, on which i want to add anchor tags to open modal, as this is specifically for mobile devices, when i created the anchor tag, it was working fine, now i have given 100% width to image and svg tag, i have done the following code:

<figure style="width:100%;position:relative;top:12%;margin-left:-1%">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <image  xlink:href="https://demo.thebrandchimp.com/cocofit/mobile/menu.gif" style="width:100%"></image>
    <a id="myBtns" xlink:href="#">
      <rect x="30" y="20" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns2" xlink:href="#">
      <rect x="150" y="20" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns3" xlink:href="#">
      <rect x="240" y="20" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns4" xlink:href="#">
      <rect x="30" y="120" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns5" xlink:href="#">
      <rect x="150" y="120" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns6" xlink:href="#">
      <rect x="240" y="120" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns7" xlink:href="#">
      <rect x="30" y="220" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns8" xlink:href="#">
      <rect x="150" y="220" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
    <a id="myBtns9" xlink:href="#">
      <rect x="240" y="220" fill="#fff" opacity="0" width="90" height="90"></rect>
    </a>
  </svg>
</figure>

and now the anchor tag is not to be seen on the image, can anyone please tell me what is wrong in here, thanks in advance

Answer 1

The only issue I see is that all the rectangles are not positioned over the images/icons. The width and height attributes on <svg> are unnecessary. Just stick to the viewBox and let the parent element (<figure>) control the size.

I don't know if it is an issue that all the rectangles are opaque. If it is you could remove the opacity attribute, move the image in front of all the anchors/rectangles and set the style of the image to pointer-events: none;.

<figure style="width:100%;position:relative;top:12%;margin-left:-1%">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <image width="100" height="100" href="https://demo.thebrandchimp.com/cocofit/mobile/menu.gif" />
    <a id="myBtns" href="#1">
      <rect x="12" y="14" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
    <a id="myBtns2" href="#2">
      <rect x="40" y="14" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
    <a id="myBtns3" href="#3">
      <rect x="66" y="14" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
    <a id="myBtns4" href="#4">
      <rect x="12" y="40" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
    <a id="myBtns5" href="#5">
      <rect x="40" y="40" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
    <a id="myBtns6" href="#6">
      <rect x="66" y="40" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
    <a id="myBtns7" href="#7">
      <rect x="12" y="67" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
    <a id="myBtns8" href="#8">
      <rect x="40" y="67" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
    <a id="myBtns9" href="#9">
      <rect x="66" y="67" fill="#fff" opacity="0" width="20" height="20"></rect>
    </a>
  </svg>
</figure>