How do you edit the attributes of an SVG symbol using D3?

Question

I'm experimenting with using Flash to create hand-drawn vector paths which I export as an .fxg image and import into Illustrator to be saved as .svg. I wish I could export them as svg directly from Flash but that's another question.

If I create a path on a layer and don't turn it into a symbol, I can easily update the fill and stroke attributes since it creates a simple SVG group, however, when I convert that path into a graphic symbol, I get this complex symbol linkage and don't seem to have access to the fill and stroke attributes. Are symbols read only? And how do you select and update a linked sybmol?

I have some pseudo svg to help me explain:

<svg>
<symbol id="btn_continue/>
<g>
  <path></path>
</g>
</symbol>
<g id="continue">
    <use xlink:href="#btn_continue" width="133.95" height="133.95" x="-6.975" y="-126.975" transform="matrix(1 0 0 -1 694.2998 409)" overflow="visible">
    </use>
</g>
</svg>

If it's possible to update the symbol, I would think I could target and update the fill like this:

d3.select("#continue").select("#btn_continue").selectAll("path").attr("fill","#990000");

This has no effect. I also tried to update the attributes of a symbol within chrome's console and they have no effect either which leads me to believe they're read only. Can you confirm this? Would it be possible to clone the symbol somehow and break it up to edit the path attributes? I found you can perform a transform on the symbol - scale, rotate, translate - all work - maybe I could do colorMatrix transform to change its color?!

Answer 1

The path is not a child of the <use> element, it is a child of the symbol so you'd need something like

d3.select("#btn_continue").selectAll("g").selectAll("path").attr("fill","#990000");