D3: Select and alter external SVG?

一笑奈何 提交于 2019-12-29 07:51:33

问题


Is it possible to select and alter elements in an embedded (external) SVG , created in Adobe Illustrator?

html:

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

circles.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 code:

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

Otherwise, I'm open to other ways of doing this. For example, something like this might work to select (which does indeed locate the SVG):

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

But how to then parse and alter in D3? Bonus question: best way to debug D3 selectors?


回答1:


This is actually a nasty case, because you can't use DOM selectors directly on embedded documents. In principle, the selector you need is "#circles > circle", but this won't work in this case. So you need something rather ugly like

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

I find the Javascript console quite useful for debugging selectors. Just type in what you want to test and see if the things you want are returned.

The problem is that the above code only works once the object has been loaded. Even using something like JQuery's .ready() won't be sufficient to ensure that. A quick and dirty solution is to repeatedly check whether the elements are present until they are:

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

Full example here.



来源:https://stackoverflow.com/questions/17265753/d3-select-and-alter-external-svg

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!