Javascript Internet Explorer中损坏的d3.js动画

我有一个d3.js动画，在除Explorer之外的所有浏览器中都能出色地工作。理想的效果是，当它增长和收缩时，将其居中，然后无限循环。我打了一个手势。问题是动画从屏幕上消失，在屏幕中间失去它的中心点。 在比较了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);
    });
}

---

问题似乎是IE忽略了

元素上的宽度和高度属性

为了进行比较，请看我在哪里删除了这些属性（以及动画）——在其他浏览器中，您将获得与IE相同的偏心定位

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

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

这个尺寸的影响。仅当引用的图形是具有viewBox属性的

或

时，它才有效

因此，我的第一个猜测是，您应该能够通过（a）删除

元素上的宽度和高度属性，以及（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 + ")";

不幸的是，虽然上面的例子是一个显著的改进，但它并不完全正确——在IE中，太阳和山并不是一个在另一个之上居中，即使它们在Firefox和Chrome中使用完全相同的代码

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);

/*针对缺少IE对屏幕宽度和高度的支持进行调整，
添加一个额外的比例变换。对于其他浏览器，
在元素上明确设置100%宽度和高度
符合艾的行为。
*/
var basicScale=50/500，
//50px是所需的宽度
//500px是参考图形的宽度和高度
startScale=1，
端刻度=10，
startTranslate=225，
endTranslate=0；
var startTrans=“比例（“+startScale+”）转换（“
+startTranslate+”，“+startTranslate+”）刻度（“
+基本刻度+”，
endTrans=“缩放（“+endScale+”）转换（“
+endTranslate+”，“+endTranslate+”）比例（“
+基本刻度+”；
/* ... */
追加（“使用”）
.attr（“xlink:href”，“Livello_1”）
.attr（“宽度”、“100%”）
.attr（“高度”、“100%”）
.attr（“转换”，startTrans）
.呼叫（转换、开始传输、结束传输）；

---

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

IE的版本将是…版本是IE 11。对了，我不知道为什么IE会在DOM检查器中显示转换属性的简化版本，而不是您指定的值，但这似乎不会影响任何东西--

scale（10,10）

的意思与

scale（10）

的意思完全相同！