svg - 使用 d3.js 和 css 应用属性的区别？

Question

我正在测试一个foreignObject，它包含一个带有文本的div，在一个SVG 中，使用d3.js 创建。

为什么由 css 创建的 div 的属性有效，但在使用 d3.js 应用时却无效？

我创建了一个 fiddle :http://jsfiddle.net/g6FXY/

这是js代码:

var body = d3.select("body");

var svg = body.append("svg")
  .attr("width", '100%')
  .attr("height", '100%')

var html = svg.append("foreignObject")
  .attr("x", 50)
  .attr("y", 25)
  .attr("width", 300)
  .attr("height", 200)
.append("xhtml:div")
  /*.attr set height doesn't. */
  /*.attr("overflow-y", "scroll") 
  .attr("height", "150px") */

.html("<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.</p>");

和CSS:

div {
  font: 14px Helvetica Neue;    
  overflow-y: scroll;
  width: 200px;
  /* CSS set height works. */ 
  height: 150px;
}

我不明白。这是命名空间的事情吗？检查对象会从结果页面显示相同的 html 代码，但使用 css 页面会注意此值，而使用 d3.js 则会选择另一个值。

我错过了什么？

目标是了解我可以和不能链接/放入foreignObject 的内容以及原因。

Answer 1

CSS 属性设置为 .style :

.append("xhtml:div")
   .style("height", "250px")

会创造

<div style="height: 250px;"></div>

代替

<div height="250px"></div>

fixed fiddle

docs