5

一些上下文：

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

问题：

每当我在我的 div 的 opacity 样式属性上启动转换时，它就会从定位流中弹出。我已经在链接的fiddle中隔离了这个问题。它与强制布局无关，但我正在使用外部元素，以便可以将 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 上变得更加时髦，元素闪烁进出可见性。

4

2 回答 2

1

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

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

<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>
于 2016-04-01T02:21:23.137 回答
0

我似乎无法理解为什么不透明度过渡将 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);
于 2013-08-18T15:57:27.180 回答