如何让 Firefox 使用 jQuery 为 SVG 文本元素中的链接不透明度设置动画？

Question

此代码的预期效果是让单词 'hello' 在不同的时间将不透明度更改为单词 'world'。这在除 Firefox（Mac 和 PC - 在 Firefox iOS 应用程序上正常工作）之外的所有主要浏览器中都可以正常工作。在 Firefox 中，单词 'hello' 和 'world' 同时可见。

非常感谢任何帮助，谢谢！

$(document).ready(function() {
    $('svg').delay(0).fadeIn(1000);
    $('#hello').delay(800).animate({
      opacity: "0.80"
    }, 1100);
    $('#world').delay(1100).animate({
      opacity: "0.80"
    }, 1750);

  });

svg {
  fill: black;

}
#hello,
#world {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="50%" y="78%">
    <a id='hello'>Hello </a>
    <a id='world'>world</a>
  </text>
</svg>

Answer 1

不要使用 opacity，请改用 fill-opacity

$(document).ready(function() {
  $('svg').delay(0).fadeIn(1000);
  $('#hello').delay(800).animate({
    fillOpacity: "0.80"
  }, 1100);
  $('#world').delay(1100).animate({
    fillOpacity: "0.80"
  }, 1750);

});

svg {
  fill: black;
}
#hello,
#world {
  fill-opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="50%" y="78%">
    <a id='hello'>Hello </a>
    <a id='world'>world</a>
  </text>
</svg>

如何让 Firefox 使用 jQuery 为 SVG 文本元素中的链接不透明度设置动画？

How do I get Firefox to animate the opacity of links within SVG text elements using jQuery?

html

css

firefox

svg

jquery-animate