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

【问题标题】：How do I get Firefox to animate the opacity of links within SVG text elements using jQuery?如何让 Firefox 使用 jQuery 为 SVG 文本元素中的链接的不透明度设置动画？
【发布时间】：2016-09-20 15:04:38
【问题描述】：

此代码的预期效果是让单词“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>

【问题讨论】：

不透明度适用于图形元素，不是一个 (w3.org/TR/SVG11/intro.html#TermGraphicsElement)。改用填充不透明度。您可以在其他 UA 错误跟踪器上提出错误，因为它们似乎没有像 Firefox 那样正确实施规范。

标签： html css firefox svg jquery-animate

【解决方案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>

【讨论】：