Ash Thomas Ash Thomas - 2 months ago 6
HTML Question

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

The desired effect for this code is to have the word 'hello' change opacity at a different time to the word 'world'. This works correctly in all major browsers except Firefox (Mac and PC - it works fine on Firefox iOS app). In Firefox, the words 'hello' and 'world' become visible at the same time.

Any help very much appreciated, thank you!



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

Don't use opacity, use fill-opacity instead

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

Comments