无法在d3中选取SVG foreignObject元素

Question

无法在d3中选取SVG foreignObject元素

13

我正在使用带有SVG foreignObject元素实现的HTML节点标签的d3力导向布局。我想在不同的时候选择这些元素以更新它们的位置和其他属性（并使用enter()和exit()跟踪它们的创建和销毁），但是我似乎无法像选择其他SVG元素一样选择它们。

以下是一个简洁的示例：

HTML:

<html>
    <head>
        <title>Cannot Select SVG Foreign Object</title>
        <script src="http://d3js.org/d3.v2.js"></script>
        <script src = "fo_select.js"></script>
     </head>
     <body>
         <svg id="example_svg" width="600" height="600">
               <g>
                  <circle r="40" cx = "80" cy="80"></circle>
                  <foreignObject width = "100" height = "100" x = "200" y="200">
                         <body>Hello, world</body>
                  </foreignObject>
               </g>
         </svg>
         <script>run()</script>
     </body>
</html>

Javascript：

function run() {
    svg = d3.select("#example_svg");
    console.log(svg.selectAll("circle"));
    console.log(svg.selectAll("foreignObject"));
}

这也在http://bl.ocks.org/3217448上发布。控制台输出如下：

[Array[1]]
[Array[0]]

第一个数组包含circle元素，而第二个是空的。为什么circle对象可以选择，而foreignObject不能呢？我猜想这可能与foreignObject的不寻常特性有关。我该如何选择它以在我的代码中操作它？非常感谢。

- Ryan Gabbard

请将以下与编程有关的内容从英语翻译为中文。仅返回翻译后的文字： - Ryan Gabbard

2个回答

-1

你应该能够使用d3.selectAll("foreignObject")或svg.selectAll("foreignObject")。可能是你的foreignObject属性中多余的逗号（在x和y之间）。我只使用D3插入foreignObject元素，所以也许嵌入它们的方式有所不同。

- Elijah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Davies · Accepted Answer

严格来说，SVG区分大小写，所以您应该使用<foreignObject>而不是<foreignobject>。

更严重的是，在WebKit中存在一个未解决的bug，导致无法选择camelCase元素。

一种可能的解决方法是使用：

.selectAll(function() { return this.getElementsByTagName("foreignObject"); })

(尽管在旧版的 WebKit 中可能无法工作；请参阅已关闭的 WebKit bug 46800。)

或者，您可以使用 CSS 类或 ID 来选择您的元素。在目前的情况下，如果可能的话，我建议采用这种方法，鉴于各种前述的 bug。