D3, html in svg animating opacity takes div out of position, why?

Question

Some context:

I created a force diagram and I connected the div to my svg g nodes so that I can display beautiful paragraphs of text. I am trying to create transitions that disappear from inserted divs.

Problem:

Whenever I initiate a transition on the transparency style attribute of my div, it jumps out of the positioning stream. I highlighted the problem in a related fiddle . This is not related to the layout of forces, but I use external elements to place the html in the svg-based power layout.

here is an example and a 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); 

And the screenshot is visual, from the violin (note how it duplicates the div)

right before the transition:

during the transition:

I am using Chrome 28 for OS X 10.6.8 to view it. It becomes even more subtle on a Safari, with elements blinking inside and out of sight.

Answer 1

The problem is still not fixed in Google Chrome (v49.0.2623.110). Here the fiddle is still showing the problem for me.

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

The combination of "g: translate" and "foreignObject" seems to be poorly handled by webkit browsers. Apparently, moving the vertical / horizontal shift from g: translate to the x or y tags of extraneous objects fixes the problem. The proof is 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> 

Answer 2

I could not understand why the opacity transition moves the div out of position. Perhaps this is a mistake that has since been resolved since Lars did not see problems with Chromium.

However, I found a solution to the problem of animating my divs in svg: wrap foreignObject in your own svg: g element and animate the g element, not the div inside the foreignObject.

Here's an edited script that works on both Chrome 28 and Safari 5.1.9 for me on OS X 10.6.8.

And the difference in the code:

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