Internet Explorer 中损坏的 d3.js 动画

Question

我有一个 d3.js 动画，它可以在除资源管理器之外的所有其他浏览器中完美运行。想要的效果是让它在它增长和收缩时居中，然后再次循环，无限循环。我做了一个 jsfiddle here。问题是动画离开屏幕并且失去了它在屏幕中间的中心点。

之后，比较 IE11 和 Chrome 中 DOM 中的 svg，我发现 IE11 中的 scale() 只有一个值“scale(x)”，而不是两个“scale(x, y)”。我确定这只是少数问题之一。

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

问题似乎是 IE 忽略了 <use> 元素的宽度和高度属性。

为了比较，请参阅this version of the fiddle，我已经删除了这些属性（以及动画）——您将在其他浏览器中获得与在 IE 中相同的偏离中心位置。

这是一个错误，我还没有遇到过。我在他们的bug report site 上也找不到任何东西。

您可能想整理一个更简单的示例并生成错误报告，同时这里有一个解决方法：

width and height attributes on a <use> element is to scale the referenced graphic 对那个大小的影响。仅当引用的图形是带有 viewBox 属性的<symbol> 或<svg> 时才有效。

因此，我的第一个猜测是，您应该能够自己进行调整，方法是 (a) 删除 <use> 元素上的宽度和高度属性，以及 (b) 添加一个额外的比例因子：

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/

不幸的是，虽然上面的例子是一个显着的改进，但它并不完全正确——太阳和山在 IE 中并没有居中，即使它们在 Firefox 和铬合金。

IE 似乎不仅仅忽略宽度和高度属性，它还应用了 100% 的默认值——这意味着它会将引用的 SVG 缩放为在应用任何转换之前，其大小与父 SVG 相同（在您的示例中为 500px 宽度和高度）。

因此，要让所有浏览器都能正常工作，您需要 (a) 使用宽度和高度属性告诉其他浏览器缩放到 100%，然后 (b) 在创建时考虑该缩放因子您的新比例因子：

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

对于正确实现规范的浏览器来说，这是获得最终结果的一种相当迂回的方式，但您在它们和 IE 中都可以获得所需的结果。