我正在使用 d3 力导向布局，其中包含使用 SVG foreignObject 元素实现的 HTML 节点标签。我想在不同时间选择这些元素以更新它们的位置和其他属性(并在使用 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 的不寻常性质有关。我将如何选择它以在我的代码中对其进行操作？非常感谢。
最佳答案
严格来说，SVG 区分大小写，因此您应该使用 <foreignObject>而不是 <foreignobject> .
但更严重的是，有一个开放的 bug in WebKit防止驼峰式元素被选中。
一种可能的解决方法是使用:
.selectAll(function() { return this.getElementsByTagName("foreignObject"); })
(虽然这可能不适用于旧的 WebKit 版本；请参阅现已关闭的 WebKit bug 46800。)
或者，您可以使用 CSS 类或 ID 并以这种方式选择您的元素。考虑到上述各种错误，如果可能，我目前会推荐这种方法。
关于javascript - 无法在 d3 中选择 SVG foreignObject 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11742812/