Home/ Questions/Q 9024471
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T06:01:10+00:00

Take a look at http://jsfiddle.net/EyrRD/ . I use D3.js library to animate SVG rectangle

  • 0

Take a look at http://jsfiddle.net/EyrRD/. I use D3.js library to animate SVG rectangle by changing its width:

rect.transition().duration(2000).delay(500).ease("cubic-out").attr("width", 500);​

Everything works fine in other browsers, but in Firefox animation suddenly stops when rectangle width reaches 300px. Actually it doesn’t matter what is the destination width (>=300), it always stops at 300px. Is that really a bug? If so, how to overcome this? An by the way, is D3.js the best tool for this kind of SVG animations?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to set the width of the SVG:

    var svg = d3.select("body").append("svg").attr("width", 1000);

    In Firefox and maybe other browsers you need to set a width and height for the svg:svg element. It is a Firefox bug, here is my related SO answer.

    • 0