如何使用 D3 编辑 SVG 符号的属性？

Question

我正在尝试使用 Flash 创建手绘矢量路径，我将其导出为 .fxg 图像并导入 Illustrator 以保存为 .svg。我希望我可以直接从 Flash 将它们导出为 svg，但这是另一个问题。

如果我在图层上创建路径并且不将其转换为符号，我可以轻松更新填充和描边属性，因为它创建了一个简单的 SVG 组，但是，当我将该路径转换为图形符号时，我得到了这个复杂的符号链接，似乎无法访问填充和描边属性。符号是只读的吗？以及如何选择和更新链接的 sybmol？

我有一些伪 svg 可以帮助我解释：

<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>

如果可以更新符号，我想我可以像这样定位和更新填充：

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

这没有效果。我还尝试在 chrome 的控制台中更新符号的属性，但它们也没有任何效果，这让我相信它们是只读的。你能证实这一点吗？是否可以以某种方式克隆符号并将其分解以编辑路径属性？我发现你可以对符号执行变换——缩放、旋转、平移——所有的工作——也许我可以做 colorMatrix 变换来改变它的颜色？！

Answer 1

路径不是<use> 元素的子元素，它是符号的子元素，因此您需要类似

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