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

Question

一些上下文:

我做了一个强制布局，并将 div 附加到我的 svg g 节点，这样我就可以显示漂亮的文本段落。我正在尝试创建淡出插入的 div 的过渡效果。

问题:

每当我在我的 div 的不透明度样式属性上启动转换时，它就会从定位流中弹出。我已经在链接 fiddle 中隔离了这个问题.它与强制布局无关，但我正在使用外部元素，以便我可以将 html 放置在基于 svg 的强制布局中。

这是一个例子，the fiddle :

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

还有来自 fiddle 的屏幕截图视觉效果(注意它似乎如何复制 div)

转换前的状态:

过渡期间的状态:

我在 OS X 10.6.8 上使用 Chrome 28 来查看它。它在 Safari 上变得更加有趣，元素在可见范围内闪烁。

Answer 1

该问题似乎仍未在 Google Chrome (v49.0.2623.110) 上得到解决。这是一个 fiddle仍然为我显示问题。

<svg width="500">
  <g transform="translate(0,50)">
    <foreignObject width="500" height="200">
      <fieldset>
        <input type="text" value="A" style="opacity: 0.9;">
        <input type="text" value="B" style="opacity: 1;">
      </fieldset>
    </foreignObject>
  </g>
</svg>

Webkit 浏览器似乎无法很好地处理“g:translate”和“foreignObject”的组合。显然，将垂直/水平移动从“g:translate”“转移”到异物的“x”或“y”标签可以解决问题。证明 here .

<svg width="500">
  <g>
    <foreignObject width="500" height="200" y="50">
      <fieldset>
        <input type="text" value="A" style="opacity: 0.9;">
        <input type="text" value="B" style="opacity: 1;">
      </fieldset>
    </foreignObject>
  </g>
</svg>