Home / Questions / 424993
Accepted
Ariel Montes
Asked: 2022-02-02 10:52:34 +0800 CST 2022-02-02 10:52:34 +0800 CST

Why do svg file links stop working if an img tag is used?

  • 772

Problem

I have an svg file that has a link <a>inside it, the function of this link is to repeat the animation of the svg every time it is clicked . It works correctly if I open the svg file in a browser, but when I import the html file using a tag <img> the animation works but the link does not seem to be recognized since when it is positioned over the svg the cursor does not change its default to the pointer and when doing click does not repeat the animation .

Browsers in which this situation is verified: Firefox, Chrome, Edge.

Minimum verifiable example

HTML page

<img src="test.svg" alt="logo">

svg-file

<svg xmlns="http://www.w3.org/2000/svg" width="680" height="370" viewBox="0 0 180 98">
  <a href="#A" transform="scale(1.7)">
    <rect x="1.5" y="1.5" width="102.6" height="54.3" rx="2.8" fill="#85bb65"/>
    <g>
      <set attributeName="opacity" to="0" dur="2s"/>
      <animateTransform attributeName="transform" attributeType="XML" type="translate" from="40 40" to="0 0" id="A" begin="2s;A.begin" dur="0.5s"/>
      <circle cx="54" cy="29" r="20" fill="#dcdcdc"/>
    </g>
  </a>
</svg>

Helpful Links

  • Full svg file that repeats when you click on it.

  • Website where the file is imported with the img tag.

html

1 Answers

  1. Best Answer

    Solution

    It may be due to browser compatibility, in Firefox it seems to work fine, however, in Microsoft Edge and Chrome it is not using the tag <img>, you can add a <iframe>to replace the tag<img>

    <iframe src="https://montesariel.com/assets/images/logo-lg.svg"></iframe>

    It is more efficient because it <iframe>loads the linked page in its entirety

    Try the img tag.

    Varies depending on browser, here is the same image linked with<img>

    <img src="https://montesariel.com/assets/images/logo-lg.svg" height="300" width="300">

    • 2