Internet Explorer中损坏的d3.js动画

Question

I have a d3.js animation that works magnificently in all other browsers except Explorer. The desired effect is for it to be centered while it grows and shrinks, then cycles again, ad infinitum. I made a jsfiddle here . The problem is that the animation goes off the screen as well as loses it's center point in the middle of the screen.

After, comparing the svg in the DOM in IE11 and Chrome, I see that scale() in IE11 only has one value "scale(x)" instead of two "scale(x, y)". I'm sure that's just one of a few issues.

var duration = 5000;

var start = 50,
startScale = 1,
endScale = 10,
startTranslate = 225,
endTranslate = 0;

var startTrans = "scale(" + startScale + "," + startScale + ")translate(" + startTranslate + "," + startTranslate + ")",
endTrans = "scale(" + endScale + "," + endScale + ") translate(" + endTranslate + "," + endTranslate + ")";

d3.select("#slider_td").append("input")
    .attr("type", "range")
    .attr("id", "slider")
    .attr("min", 3000)
    .attr("max", 7000)
    .attr("value", duration)
    .on("change", function () {
    duration = this.value;
    d3.select("#_rb").property("value", d3.round(duration / 1000));
});

var svg = d3.select("#animation_td").append("svg")
    .attr("width", 500)
    .attr("height", 500)
    .style("background-color", "#ADD9F7");

svg.append("use")
    .attr("xlink:href", "#Livello_1")
    .attr("width", start)
    .attr("height", start)
    .attr("transform", startTrans)
    .call(transition, startTrans, endTrans);

svg.append("circle")
    .attr("cx", 250)
    .attr("cy", 730)
    .attr("r", 350)
    .style("fill", "#99CC00")
    .style("stroke", "white");

function transition(element, start, end) {
    element.transition()
        .duration(duration)
        .attr("transform", end)
        .each("end", function () {
        d3.select(this).call(transition, end, start);
    });
}

Answer 1

The problem seems to be that IE is ignoring the width and height attributes on the <use> element.

For comparison, see this version of the fiddle where I've removed those attributes (and also the animation) -- you'll get the same off-center positioning in the other browsers as in IE.

This is a bug, and one I hadn't come across yet. Nor could I find anything on their bug report site .

You might want to put together a simpler example and make the bug report, in the meantime here's a workaround:

The effect of width and height attributes on a <use> element is to scale the referenced graphic to that size. It only has an effect when the referenced graphic is a <symbol> or <svg> with a viewBox attribute.

Therefore, my first guess was that you should be able to make the adjustments yourself by (a) removing the width and height attributes on the <use> element, and (b) adding an additional scale factor:

var basicScale = 50/557.8,   
    //50px is the desired width
    //557.8px is the width and height of the original graphic
    startScale = 1,
    endScale = 10,
    startTranslate = 225,
    endTranslate = 0;

var startTrans = "scale(" + startScale + ") translate(" 
                  + startTranslate + "," + startTranslate + ") scale(" 
                  + basicScale + ")",
    endTrans = "scale(" + endScale + ") translate(" 
                  + endTranslate + "," + endTranslate + ") scale(" 
                  + basicScale + ")";

http://jsfiddle.net/U9L7w/5/

Unfortunately, while the above example is a significant improvement, it isn't quite right -- the sun and the hill aren't centered one above the other in IE, even though they are with the exact same code in Firefox and Chrome.

It seems that IE doesn't just ignore the width and height attributes, it applies a default value of 100% -- meaning it scales the referenced SVG to be the same size as the parent SVG (500px width and height in your example) before applying any transformations.

So to get things to work nicely in all browsers, you'll need to (a) tell the other browsers to scale to 100% using the width and height attributes, then (b) factor in that scaling factor when you create your new scaling factor:

/* To adjust for a lack of IE support for width and height on <use>, 
   add in an extra scale transform.  For other browsers,  
   set the 100% width and height explicitly on the <use> element   
   to match IE's behaviour.
*/
var basicScale = 50/500,  
    //50px is the desired width
    //500px is the width and height of the referencing graphic
    startScale = 1,
    endScale = 10,
    startTranslate = 225,
    endTranslate = 0;

var startTrans = "scale(" + startScale + ") translate(" 
                  + startTranslate + "," + startTranslate + ") scale(" 
                  + basicScale + ")",
    endTrans = "scale(" + endScale + ") translate(" 
                  + endTranslate + "," + endTranslate + ") scale(" 
                  + basicScale + ")";

/* ... */

svg.append("use")
    .attr("xlink:href", "#Livello_1")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("transform", startTrans)
    .call(transition, startTrans, endTrans);

http://jsfiddle.net/U9L7w/6/

It's a rather round-about way of getting to the end result for browsers that implement the specs properly, but you get the desired result in both them and in IE.