SVG 的动画 href 在 Firefox 中不起作用答案

【问题标题】：SVG's animate href not working in FirefoxSVG 的动画 href 在 Firefox 中不起作用
【发布时间】：2017-09-15 23:02:15
【问题描述】：

最近在网上浏览 SVG 的动画标签，看到这样的：

&lt;svg&gt;&lt;animate href="#x" attributeName="href" values="https://www.google.com"/&gt;&lt;a id="x"&gt;&lt;circle r=100&gt;

因此，这将在渲染时将<animate values> 作为href 插入到<a> 标记中。所以，当你点击圆圈动画时，会触发https://www.google.com。

问题是，这个 href 插入在 Firefox 中不起作用。在 Chrome 中运行良好。

如何在 Firefox 中将这个“值”插入到 <a> 标记中？（问题是使用 SVG 实现 动态插入 而不是功能）
另外，在 SVG 中是否有任何类似的 运行时属性插入 功能在 Firefox 中受支持？这些是什么？我需要专门为<a>'s href 属性注入一些值，而不直接指定它。

【问题讨论】：

【解决方案1】：

这里似乎有一个 Firefox 错误：

我需要在 <a> 元素上添加一个虚拟 href="" 才能使其正常工作。

我提出了a bug on Bugzilla 并附上了修复该错误的补丁。

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

如果我使用老式的 xlink:href 方式，我需要一个虚拟的 xlink:href 值。

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

【讨论】：

感谢您的回答！这使得circle 可以通过链接点击，但Chrome 似乎将链接插入<a>'s href，但FF 没有。我们可以让FF像Chrome一样在<a>'s href中插入values吗？我需要在运行时专门将values 插入<a>'s href。
在运行时为我工作，即点击链接将您带到动画位置
是的，但 Chrome 有所不同。我特别谈到了 DOM，在 Chrome 中，链接被插入到 <a>'s href 中，但在 Firefox 中没有。我正在使用与 DOM 解析相关的工作，所以你能建议我一些方法来动态插入 values 链接到 <a>'s href 吗？
您可以在 Firefox 上使用 SVG DOM 读取 animVal。如果你使用 getAttribute 它不会显示。
animVal 在某些情况下与 Chrome 中的 <a>'s href 并不完全相同。例如，如果链接是&#8192;https://www.google.com，Chrome 的 SVG 渲染器将去除（修剪）&#8192; 并仅将https://www.google.com 插入到<a>'s href 中。但是，FF 不会修剪并将其动态插入到<a>'s href 中，并且在 animVal 中具有未修剪的值。我无法准确解释用例，但是，我需要修剪后的值，即 https://www.google.com 没有 &#8192;（就像 Chrome 一样）在 <a>'s href 中呈现时自动进行。