javascript - 利用d3无法在SVG内渲染foreignObject

我已经阅读了相关的文章，并认为我的代码是准确的；我也尝试了此代码的许多变体。我希望有人能找到我确定是我的代码中的一个小错误，因为我没有运气来检测它。

问题：foreignObject元素的内容无法在浏览器中直观呈现。 DOM元素显然已插入DOM，但不可见。

我注意到，在Chrome Web开发人员中，foreignObject元素在元素检查器中不是camelcase，但是在编辑html内联时，它可以作为camelcase进行编辑，因此显然该元素作为camelcase保留。这可能对该问题没有影响，但我想提一提。

执行后的DOM：

<g class="component" transform="translate(75,20)">
  <rect width="100" height="100" fill="red" opacity="1">
    <foreignObject width="100" height="100" requiredExtensions="http://www.w3.org/1999/xhtml">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <div style="width: 100px; height: 100px; background-color: yellow;" data-uid="special_uid">
        </div>
      </body>
    </foreignObject>
  </rect>
</g>

D3 SVG / XHTML生成代码（CoffeeScript）：

  component = canvas.select("[data-uid=#{entityObj.name}]").selectAll('.component')
    .data(entityObj.components)
    .enter()
    .append("g")
    .each( (componentObj,i,d) =>
      @generateAssociationLocalCache(entityObj,componentObj,i,d)
      @generateComponentLocalCache(entityObj,componentObj,i,d)
    )
    .attr("data-uid", (o,i,d)-> o.name)
    .attr("id", (o,i,d)-> o.name)
    .attr("class", "component")
    .attr("transform", (componentObj,i,d) =>
      coords = @rows[entityObj.name]['components'][componentObj.uid]
      "translate(#{coords.x},#{coords["y#{i}"]})"
    )
    .append("rect")
    .attr("width", (componentObj,i,d) => componentObj.width)
    .attr("height", @get('component').height)
    .attr("fill", "red")
    .attr("opacity", "1")
    .append("foreignObject")
    .attr("width", (componentObj,i,d) => componentObj.width)
    .attr("height", @get('component').height)
    .attr("requiredExtensions", "http://www.w3.org/1999/xhtml")
    .append("body")
    .attr("xmlns","http://www.w3.org/1999/xhtml")
    .append("div")
    .attr("style", (componentObj,i,d) => "width: #{componentObj.width}px; height: #{@get('component').height}px; background-color: yellow;")
    .attr("data-uid", (o,i,d) -> o.uid)

最佳答案

您至少有2期。首先，<foreignObject>不能是<rect>元素的子元素。我不确定您要实现的目标，但您可能需要拆分代码

  var g = component.append("g")
    .each( (componentObj,i,d) =>
      @generateAssociationLocalCache(entityObj,componentObj,i,d)
      @generateComponentLocalCache(entityObj,componentObj,i,d)
    )
    .attr("data-uid", (o,i,d)-> o.name)
    .attr("id", (o,i,d)-> o.name)
    .attr("class", "component")
    .attr("transform", (componentObj,i,d) =>
      coords = @rows[entityObj.name]['components'][componentObj.uid]
      "translate(#{coords.x},#{coords["y#{i}"]})"
    )

然后做

g.append("rect")
.attr("width", (componentObj,i,d) => componentObj.width)
.attr("height", @get('component').height)
.attr("fill", "red")
.attr("opacity", "1");

g.append("foreignObject")
...

这将使rect和foreignObject成为同级。

其次xmlns不是您可以在创建对象后设置的属性，因此

.append("body")
  .attr("xmlns","http://www.w3.org/1999/xhtml")

应该

.append("xhtml:body")

d3然后将在正确的名称空间中创建元素。

ForeignObject

javascript - 利用d3无法在SVG内渲染foreignObject