javascript - Internet Explorer 中损坏的 d3.js 动画

Question

我有一个 d3.js 动画，它在除 Explorer 之外的所有其他浏览器中都表现出色。期望的效果是它在增长和收缩时居中，然后再次循环，无限循环。我做了一个 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的效果到那个尺寸。它仅在引用图形为 <symbol> 时有效或 <svg>带有 viewBox 属性。

因此，我的第一个猜测是您应该能够通过 (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 和 Chrome 。

似乎 IE 不只是忽略宽度和高度属性，它应用默认值 100% —— 这意味着它将引用的 SVG 缩放为在应用任何转换之前与父 SVG 的大小相同(在您的示例中为 500 像素的宽度和高度)。

因此，为了让所有浏览器都能很好地工作，您需要 (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 中都能获得所需的结果。