我正在使用js库(美人鱼(在网页上生成svg。当用户使用键盘快捷键激活各种命令时，我需要动态地将样式应用于svg的各个部分，特别是，我需要突出显示svg中当前指定为逻辑模型中选定的元素。看看关于动态样式svg的其他问题，它们处理的是内联静态svg，所以它们可能不适用于我的案例，到目前为止我尝试的方法都不起作用。
我尝试采用的风格是border-radius : 2rem; box-shadow : 0 0 3rem red;当应用于常规html时，这会为元素提供一个发光的红色边框。
我尝试的第一件事是将其作为类包含在这样的元素中：
<style>
.highlight {
border-radius : 2rem;
box-shadow : 0 0 3rem red;
}
</style>
将类添加到常规html元素的类列表中(如，或
(，将产生所需的样式。然而，当我以编程方式获取一个元素并将该类添加到其类列表中时，它将保持没有发光边界。使用chrome开发工具检查svg，发现相关的类已经添加到元素的类列表中。对普通html使用相同的方法是成功的。作为参考，这里是我用来添加类的方法：
graphicDiv.querySelector(selector).classList.add('highlight')
这次失败了，我想svg的内部元素可能有一些风格超过了我的风格，所以我补充道！对我的风格很重要，所以它们会有最高的优先级。这仍然失败了，所以接下来我尝试为元素设置样式属性，它应该具有最高优先级，如下所示：
graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')
这仍然未能在svg的风格上产生任何差异。检查chrome-dev工具中的元素可以发现样式属性确实已设置。
我还尝试将我的样式定义添加到svg自己的元素中，方法是在生成svg之后获取它，并将我的类样式定义附加到它的文本内容中。它仍然不起作用。
最后，我认为这些css属性可能不受支持，所以我将它们改为background-color: green;，因为我在一篇关于用css设计svg样式的文章中看到，在。这没用。我尝试应用到svg中的一个元素。也没用。
我完全不明白为什么这些都不起作用。如果有人能帮助我了解如何动态更改svg元素的样式，我将不胜感激！
虽然可以为SVG元素提供普通的CSS属性，但大多数都不做任何事情，因为SVG元素根据定义遵循一组不同的样式规则。
一个简单的例子是，在普通CSS中，您可以设置left: 25px，但对于SVG，您需要设置x: 25。
对于所需的样式，边界半径通常使用stroke-width实现。对于背景颜色，只需使用fill。至于阴影，它可能有点复杂，但你应该看看feDropShadow。
除此之外，使用css规则应用这些样式应该大致相同。
我希望这至少能有所帮助。