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

某些上下文：

我制作了一个force布局，并将div附加到svg g节点上，以便显示漂亮的文本段落。 我正在尝试创建淡出插入的div的过渡

问题：

---

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

下面是一个示例，并且：

和一个屏幕截图，从小提琴（注意它似乎复制了div）

过渡前的国家权利：

过渡期间的状态：

---

我正在使用OS X 10.6.8上的Chrome 28来查看它。在Safari上，它变得更加有趣，元素在可见性中来回闪烁。

我似乎无法理解为什么不透明度转换会将div移出位置。也许这是一个已经解决的错误，因为拉尔斯认为铬没有问题

但是，我确实找到了在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);

---

谷歌Chrome（v49.0.2623.110）似乎仍然没有解决这个问题。 这是一个仍然向我展示这个问题的例子

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

似乎“g:translate”和“foreignObject”的组合在webkit浏览器中处理得不好。显然，将垂直/水平移动从“g:translate”转移到异物的“x”或“y”标记可以解决问题。证明

请您发布一个显示问题的force布局示例好吗？我已经在小提琴中隔离了这个问题，它似乎与force布局无关（我只是用它来调整我的g元素的translate属性），我只是想给出一些我为什么使用foreignObjects的上下文。但是，是的，我会把它拔出来。嗯，你的小提琴对我来说很好。在Linux.darn上安装Chromium，这使得它更难理解和修复。对我来说，它一直像截图。谢谢

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

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