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");

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

1 个答案: