Html 如何向使用JavaScript动态创建的SVGRect添加类？

我正在尝试将一个类添加到我用JavaScript创建的SVGRect元素中。我可以看到类被添加到元素中（在开发工具中），但是元素没有相应地设置样式。如果我将一个类添加到内联创建的Rect中，元素将被设置样式

• SVG元素具有矩形0
• 我使用“drawSomething”将Rect1添加到SVG元素中
• 我使用“updateMething”将类“task0”和“task1”添加到Rect0和Rect1

Rect0已设置样式，而Rect1未设置样式

更新后我需要“申请”吗？两个Rect元素的宽度都是在执行“updateMething”之后更新的，这让我觉得我不需要“apply”

“rect”规则也不会应用于动态创建的rect

---

此外，我还应该提到我的SVG元素是角度组件的一部分。不知道这会不会改变什么

函数drawSomething（）
{
让SVG_NS=”http://www.w3.org/2000/svg";
让svg=document.getElementById（'editorSvg'）；
让rect=document.createElements（SVG_NS，“rect”）；
setAttribute（“id”，“svg-rect-1”）；
rect.setAttribute（“x”，“100”）；
矩形集合属性（“y”、“80”）；
矩形设置属性（“宽度”、“50”）；
rect.setAttribute（“高度”、“50”）；
appendChild（rect）；
}
函数updateMething（）
{
让rect0=document.getElementById（“svg-rect-0”）；
rect0.style.width=“100”；
rect0.setAttribute（“类”、“任务0”）；
让rect1=document.getElementById（“svg-rect-1”）；
rect1.style.width=“100”；
rect1.setAttribute（“类”、“任务1”）；
}
画某物（）；
updateMething（）
rect{
笔画：红色；
笔画宽度：2；
}
.task0{
填充：绿色；
笔画宽度：5；
}
.任务1{
填充物：橙色；
笔画宽度：5；
}
代码似乎工作正常。至少是铬的

请注意，通过CSS属性（
style.width=“100”
）设置
width
）是SVG 2中的一项功能，它还不能在所有浏览器中使用。例如，目前，它可以在Chrome中使用，但不能在Firefox中使用

另一个问题是，在CSS中，属性应该有单位。所以从技术上讲，您应该编写
rect0.style.width=“100px”（注意
px
）

无论如何，为了更好地跨浏览器工作，我建议使用：

rect0.setAttribute("width", "100");

不过，您设置
类的方式看起来还不错。除了宽度之外，我看不出有任何理由打破任何东西

更新

啊，我明白你现在想做什么了

您可以这样做：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private renderer: Renderer2) {
  }

  public addRect1 = () => {
      let svg = document.getElementById('editorSvg');
      const rect = this.renderer.createElement("rect", 'svg');
      this.renderer.setAttribute(rect, "id", "svg-rect-1");
      this.renderer.setAttribute(rect, "x", "100");
      this.renderer.setAttribute(rect, "y", "80");
      this.renderer.setAttribute(rect, "width", "50");
      this.renderer.setAttribute(rect, "height", "50");
      this.renderer.appendChild(svg, rect)
  }

  styleRect0 = () => {
      let rect = document.getElementById("svg-rect-0"); // as unknown as SVGRectElement;
      rect.style.width = "100";
      rect.classList.add("task0");
  }

  styleRect1 = () => {
      let rect = document.getElementById("svg-rect-1"); // as unknown as SVGRectElement;
      rect.style.width = "100";
      rect.classList.add("task1");
  }
}

我还应该提到，我的SVG元素是角度组件的一部分。不知道这会不会改变什么。不应该的，好像是因为有棱角。请看这场闪电战：