0

我正在使用 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 在其内部元素中有一些样式覆盖了我的样式，所以我添加了 !important 到我的样式中，这样它们将具有最高优先级。这仍然失败，所以接下来我尝试为元素设置样式属性，它应该具有最高优先级，如下所示：

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

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

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

最后，我认为这些 css 属性可能不受background-color: green;. 这没有用。我尝试应用于 svg 中的元素。也没有用。

我完全困惑为什么这些都不起作用。如果有人能帮助我了解如何动态更改 svg 元素的样式，我将不胜感激！

4

1 回答 1

3

虽然普通的 CSS 属性可以赋予 SVG 元素，但大多数都没有做任何事情，因为 SVG 元素根据定义遵循不同的样式规则集。

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

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

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

我希望这至少有一些帮助。

于 2020-12-08T10:28:09.840 回答