SVG's animate href not working in Firefox

Question

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.

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)
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.

Robert Longson · Answer 1 · 2017-05-05T14:14:01.613

1

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>

edited May 05 '17 at 14:14

answered Apr 19 '17 at 23:12

Robert Longson

118,664
26
252
242

Thanks for the answer! This make the `circle` clickable with the link, but Chrome seems to insert the link into the `'s href`, but FF doesn't. Can we make FF to insert the `values` in `'s href` just like Chrome? I need specifically insert the `values` into `'s href` at run time. – verstappen_doodle Apr 21 '17 at 09:16
Works at runtime for me i.e. Clicking on the link takes you to the animated location – Robert Longson Apr 21 '17 at 09:19
Yeah, but Chrome differs in it. I specifically speak about the DOM, where in Chrome, the link is inserted into the `'s href`, but not in Firefox. I'm kinda working with DOM parsing-related, so can you please suggest me some way to dynamically insert the `values` link to `'s href`? – verstappen_doodle Apr 21 '17 at 09:27
You can read the animVal using the SVG DOM just fine on Firefox. It won't show if you use getAttribute though. – Robert Longson Apr 21 '17 at 09:38
animVal is not exactly same as the `'s href` at some cases in Chrome. For example, if the link is ` https://www.google.com`, Chrome's SVG renderer will strip out (trim) the ` ` and insert only `https://www.google.com` into `'s href`. But, FF doesn't trim and dynamically insert it in `'s href` and has untrimmed values in animVal. I couldn't explain exactly the use case, but, I need the trimmed value i.e., `https://www.google.com` without ` ` (just like Chrome does) automatically while rendering in `'s href`. – verstappen_doodle Apr 21 '17 at 10:42
Any possibility to make it work (trim and dynamic run-time `href` insertion automagically just like Chrome? I mean with any other feature of SVG? – verstappen_doodle Apr 21 '17 at 12:38
Sure, download the source code to Firefox and fix it. – Robert Longson Apr 21 '17 at 19:39
@RobertLongson if you have a free time, can you take a look on [this question](http://stackoverflow.com/q/43618372/5875416) please? thanks. – L777 Apr 25 '17 at 18:38

SVG's animate href not working in Firefox

1 Answers1