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

Question

此代码的预期效果是让“hello”一词在不同的时间改变“世界”一词的不透明度。这适用于所有主流浏览器，除了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

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;