d3,svg中的html,动画不透明度会使div失去位置,为什么？

Question

一些背景:

我已经制作了一个力布局,并且我已将div添加到我的svg g节点,这样我就可以显示很好的文本段落.我正在尝试创建淡出插入的div的转换.

问题:

每当我在div的不透明度样式属性上启动转换时,它就会弹出定位流程.我已经在链接小提琴中孤立了这个问题.它与力布局无关,但我使用外来元素,以便我可以将html放在基于svg的力布局中.

这是一个例子,小提琴:

var foreign = d3.select("body")
    .append("svg")
    .attr("height", 200)
    .attr("width", 300)
    .append("svg:g")
    .attr("transform", 
          "translate(40, 20)")
    .append("svg:foreignObject")
    .attr("width", "100px")
    .attr("height", "50px");

var outer = foreign.append("xhtml:div")
    .attr("class", "outer");

var inner = outer.append("xhtml:div")
    .attr("class", "inner")
    .text("inner div");

outer.transition()
    .duration(3000)
    .style("opacity", 0.0);

还有一个视觉截图,来自小提琴(请注意它是如何复制div的)

转型前的州:

转型期间的状态:

我在OS X 10.6.8上使用Chrome 28来查看它.它在Safari上变得更加有趣,元素闪烁进出可见性.

Answer 1

我似乎无法理解为什么不透明度转换会使 div 移出位置。也许这是一个已经解决的错误，因为 Lars 在 Chromium 上没有发现任何问题。

不过，我确实找到了在 svg 中对 div 进行动画处理的问题的解决方案：将foreignObject 包装在它自己的 svg:g 元素中并对 g 元素进行动画处理，而不是对foreignObject 内的div 进行动画处理。

这是一个经过编辑的小提琴，适用于 OS X 10.6.8 上的 Chrome 28 和 Safari 5.1.9。

以及代码中的区别：

var gWrapOnForeign = d3.select("body")
    .append("svg")
    .attr("height", 200)
    .attr("width", 300)
    .append("svg:g")
    .attr("transform", 
          "translate(40, 20)")
    .append("svg:g");

var foreign = gWrapOnForeign.append("svg:foreignObject")
    .attr("width", "100px")
    .attr("height", "50px");

var outer = foreign.append("xhtml:div")
    .attr("class", "outer")
    .style("opacity", 1.0);

var inner = outer.append("xhtml:div")
    .attr("class", "inner")
    .text("inner div");

gWrapOnForeign.transition()
    .duration(3000)
    .style("opacity", 0.0);