CODEWITHSUNDEEP
htmlfirefoxsvghrefsvg-animate
verstappen_doodle
verstappen_doodle

Reputation: 549

SVG's animate href not working in Firefox

Recently was surfing about SVG's animate tags, and saw something like this:

<svg><animate href="#x" attributeName="href" values="https://www.google.com"/><a id="x"><circle r=100>

So, this will insert the <animate values> into the <a> tag as href while rendering. So, when you click the circle animation, https://www.google.com is triggered.

The issue is, this href insertion doesn't work in Firefox. Works well in Chrome.

  1. How do I achieve this "values" insertion into <a> tag in Firefox? (The question is to achieve the dynamic insertion using SVG and not about the functionality)
  2. Else, are there any similar runtime attribute insertion feature in SVG that is supported in Firefox? What are they? I need to specifically inject some value to <a>'s href attribute without directly specifying it.

Upvotes: 0

Views: 481

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

There seems to be a Firefox bug here:

I need to add a dummy href="" on the <a> element to get it working.

I've raised a bug on Bugzilla and attached a patch that fixes the bug.

<svg><animate href="#x"
attributeName="href" 
values="https://www.google.com"/><a href="" id="x"><circle r="100"/>
</a></svg>

If I do it the old fashioned xlink:href way I need a dummy xlink:href value instead.

<svg><animate href="#x"
attributeName="xlink:href" 
values="https://www.google.com"/><a xlink:href="" id="x"><circle r="100"/>
</a></svg>

Upvotes: 1

Related Questions