Search code examples
csssvgbootstrap-modalbootstrap-5

Links(Hyperlinks) inside an svg not working when the svg is placed in an img tag in a Bootstrap 5 Modal

In fact , the pointer doesn't even change its shape when it is hovered over the part containing the hyperlink. When I open the svg file separately in my browser , the links work alright . Below is the code:
<HTML>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-xl">
    <div class="modal-content">
      <div class="modal-body">
        <img src="drawing.svg">
      </div>
      </div>
  </div>
</div>

CSS



.modal-dialog{
  pointer-events: all !important;
}

As you can see above, I tried setting pointer-events :all !important; but that didn't work.

Solution

  • So , anyone trying to use SVG to refer to links (which are inside the svg), do not use <img> tag , use the <object> tag.

    Like this :

    <object type="image/svg+xml" data="path/to/your/drawing.svg"></object>

    Thank you everyone!