svg html g标签id,javascript – 将SVG绘制到Canvas中并使用其ID操纵绘制的元素

我有一个SVG文件加载到< object>标签.我正在使用

javascript来操纵这个svg中的一些元素.例如：

var theSvgXml = document.getElementById('theObject').contentDocument;

theSvgXml.getElementById('theElementId').style.display = 'inline';

theSvgXml.getElementById('theElementId').style.fill = 'red';

theSvgXml.getElementById('anotherElement').style.display = 'none';

这很完美,一切都很顺利.但我想知道是否可以用画布做同样的事情.我已经阅读了关于kinetic js,fabric js,canvg js的内容,我看到了通过文件目录,xml或图像将svg文件加载到画布中的各种方法.

但是在将这个svg文件绘制到画布之后,我可以通过它们的ID来操作这些元素吗？

SVG是使用Adove Illustrator创建的,每个图层或组都有一个id,可以使用css选择器访问.再次,可以在将SVG绘制到画布上之后在画布中完成. (请注意,SVG是巨大的,我考虑画布解决方案的唯一原因是因为svg没有显示插图画家的多重效果来创建阴影)

任何帮助将受到高度赞赏.谢谢.

代码片段：

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

…

从adobe illustrator导出文件后,您可以看到形成xml片段,每个组都设置了一个ID.如何将这些作为对象保存在画布中(如Fabrics.js建议使用getObjects()方法)？有没有办法实现这个目标？如果是,我如何参考这些群组？此外,阴影是一个关键问题,我不想使用闪光灯.谢谢