Question

我正在使用d3.js来显示带有节点和边的图。我使用foreignObject标记来实现节点的自定义标签。这是我将foreinObjects添加到节点的代码。

node.append("svg:g").attr("x",12).attr("y",".31em").attr("pointer-events","none").append("svg:foreignObject")
.attr("width",400).attr("height",400).append("xhtml:body").style("background-color","transparent").append("xhtml:div").attr("class","node_lables_html").html(function(d,i){
    return node_labels_html[parseInt(d.num)];
});

这就是它在html中的样子。这是一个节点的HTML代码：

<g transform="translate(130.53028822246984,182.7303426183812)">
    <circle style="fill: rgb(31, 119, 180);" r="7" class="node node8"></circle>
         <g pointer-events="none" y=".31em" x="12">
               <foreignObject height="400" width="400">
                     <body style="background-color: transparent;">
                           <div style="display: inline-block;" class="node_lables_html">
                                 <table style="font-size: 18px">
                                      <tbody><tr>
                                              <td>
                                                     port
                                               </td>
                                       </tr>
                                  </tbody></table>
 </div></body></foreignObject></g></g>

我的SVG也启用了缩放和平移功能。有<g>标记，其中包含所有节点和边缘，并相应地对其进行转换。一切都在Firefox中完美运行。但是当我在谷歌浏览器中试用它时，标签只显示而不随节点移动。 Chrome是否支持转换foreignObjects？

SVG foreignObject不会在Chrome中进行转换

0 个答案: