在后台修改SVG

Question

我有一些元素的SVG图标。这些元素例如是平交路口上的道路信号。如果道路信号灯闪烁红色，我将适当的SVG元素的填充更改为红色。

现在我在菜单中有这些元素，我希望每个元素都有它的图标，而且该图标代表其灯的状态。因此，当灯泡状态更改时，相应元素上的图标也会更改。

我以前在Java（GWT）中做到了这一点，我通过将图标加载到帮助器类（SvgHelper）中的变量中来完成的，然后在任何时候想要在任何地方显示特定元素的图标时，我都调用了svgHelper.getIcon（element ），并修改了已存储在变量中的svg（在后台），然后向我返回了新的克隆的SVGImage，可以将其放置在任何地方。所以我只有一个图标，更改了它的状态，将其克隆并返回。

现在，当我想用​​JavaScript进行操作时，似乎要以任何方式使用SVG，它必须首先在DOM中。

有没有一种方法可以在“后台”使用SVG，使其不在DOM中？因为我宁愿更改多个SVG属性，并在完成后将SVG放入DOM中。另外，我按ID定位元素，并且在一个页面上可以有多个这些图标，因此ID会发生冲突。

我尝试使用 svg.js 并从字符串导入我的svg，但是据我了解，该库实际上需要一些div才能起作用，因此将其添加到DOM中。

在Java中，我使用this库进行此操作，并且由于最终将其编译为JS，因此应该有一种方法。

Answer 1

由于即使GWT库也将SVG添加到DOM中，所以我最终只是这样做了。因此，我有一些对象位于屏幕外部某处的DOM中，通过ID定位元素，更改其属性。 SVG Onec已准备就绪，我使用vuejs的v-html指令将其放置在目标位置。