5

是否可以在 Adob​​e Illustrator 中创建的嵌入式（外部）SVG 中选择和更改元素？

html:

<object data="circles.svg" type="image/svg+xml" id="circles"></object>

圈子.svg：

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" >
  <circle id="c_red" fill="#A00" stroke="#000" cx="40" cy="40" r="40"/>
  <circle id="c_grn" fill="#0A0" stroke="#000" cx="60" cy="60" r="40"/>
</svg>

d3 代码：

<script>
  var my_circles = d3.select("#circles svg").selectAll("circles");
  my_circles.attr("fill", "black");
</script>

否则，我对其他方式持开放态度。例如，这样的选择可能会起作用（确实可以找到 SVG）：

var svg = document.getElementById('circles');

但是如何在 D3 中解析和改变呢？额外问题：调试 D3 选择器的最佳方法？

4

1 回答 1

7

这实际上是一个令人讨厌的情况，因为您不能直接在嵌入文档上使用 DOM 选择器。原则上，您需要的选择器是"#circles > circle"，但这在这种情况下不起作用。所以你需要一些相当丑陋的东西

var my_circles = d3.select(document.getElementById("circles").contentDocument)
                   .selectAll("circle");

我发现 Javascript 控制台对于调试选择器非常有用。只需输入您要测试的内容，看看是否返回了您想要的内容。

问题是上述代码仅在加载对象后才有效。即使使用 JQuery 之类的东西.ready()也不足以确保这一点。一个快速而肮脏的解决方案是反复检查元素是否存在，直到它们：

function changeColor() {
  var sel = d3.select(document.getElementById("circles").contentDocument)
              .selectAll("circle");
  if(sel.empty()) {
    setTimeout(changeColor, 100);
  } else {
    sel.attr("fill", "black");
  }
}
changeColor();

完整的例子在这里。

于 2013-06-23T22:16:31.023 回答