如何动态设置以编程方式生成的 SVG 样式？

Question

我正在使用 js 库 (mermaid) 在网页上生成 svg。当用户使用键盘快捷键激活各种命令时，我需要动态地将样式应用于 svg 的部分，特别是，我需要突出显示 svg 中当前指定为逻辑模型中选定元素的元素。查看有关动态样式化 svg 处理内联静态 svg 的其他问题，因此它们可能不适用于我的情况，并且 none 目前我尝试过的方法都有效。

我尝试应用的样式是 border-radius : 2rem; box-shadow : 0 0 3rem red; 当应用于常规 html 时，这会给元素一个发光的红色边框。

我尝试的第一件事是将其作为 class 包含在这样的元素中：

<style>
  .highlight {
    border-radius : 2rem; 
    box-shadow : 0 0 3rem red;
  }
</style>

将 class 添加到常规 html 元素的 class 列表，如、或

，将产生所需的样式。但是，当我以编程方式获取一个元素并将 class 添加到其 class 列表时，它将保持没有发光边框。使用 chrome 开发人员工具检查 svg 显示相关 class 已添加到元素的 class 列表中。使用相同的方法对常规 html 是成功的。作为参考，这里是我用来添加 class:

的方法

graphicDiv.querySelector(selector).classList.add('highlight')

这失败了，我认为 svg 的内部元素中可能有一些样式覆盖了我的样式，所以我在我的样式中添加了 !important 以便它们具有最高的优先级。这仍然无法正常工作，所以接下来我尝试为元素设置样式属性，它应该具有最高的优先级，如下所示：

graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')

这仍然未能在 svg 的样式上产生任何差异。检查 chrome 开发工具中的元素显示确实设置了样式属性。

我还尝试将我的样式定义添加到 svg 自己的元素中，方法是在生成 svg 后获取它，并将我的 class 样式定义附加到其文本内容。还是不行。

最后，我认为那些 css 属性可能不受支持，所以我将它们更改为 background-color: green;，因为我想我在一篇关于使用 [=38= 设置 svg 样式的文章中看到了] 这个 css 道具被用在 .这没有用。我尝试应用于 svg 中的元素。也没用。

我完全不明白为什么 none 这行得通。如果有人能帮助我理解如何动态更改 svg 元素的样式，我将不胜感激！

Answer 1

虽然正常的 CSS 属性可以赋予 SVG 元素，但大多数元素什么都不做，因为根据定义，SVG 元素遵循一组不同的样式规则。

一个简单的例子是，在正常 CSS 中你可以设置 left: 25px 但对于 SVG 你需要设置 x: 25.

对于你想要的样式，边框半径通常用stroke-width来实现。对于背景颜色，只需使用 fill。至于影子，它可能有点复杂，但你应该看看 feDropShadow.

除此之外，使用css规则应用这些样式应该大致相同。

我希望这至少能有所帮助。

如何动态设置以编程方式生成的 SVG 样式？

How can I dynamically style programmatically generated SVG?

javascript

css

svg

mermaid