Question

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

。

SVG元素具有Rect0
我使用“ drawSomething”将Rect1添加到SVG元素
我使用“ updateSomething”将类“ task0”和“ task1”添加到Rect0和Rect1。

Rect0是样式，Rect1不是。

更新后是否需要“应用”？在执行“ updateSomething”之后，两个Rect元素的宽度都会更新，这使我认为我不需要“应用”。

“ rect”规则也不适用于动态创建的Rect。

此外，我还应该提到我的SVG元素是Angular组件的一部分。想知道这是否有任何改变。

function drawSomething()
{
  let SVG_NS = "http://www.w3.org/2000/svg";
  let svg = document.getElementById('editorSvg');
  let rect = document.createElementNS(SVG_NS, "rect");
  rect.setAttribute("id", "svg-rect-1");
  rect.setAttribute("x", "100");
  rect.setAttribute("y", "80");
  rect.setAttribute("width", "50");
  rect.setAttribute("height", "50");
  svg.appendChild(rect);
}

function updateSomething()
{
  let rect0 = document.getElementById("svg-rect-0");
  rect0.style.width = "100";
  rect0.setAttribute("class", "task0");
 let rect1 = document.getElementById("svg-rect-1");
  rect1.style.width = "100";
  rect1.setAttribute("class", "task1");
}

drawSomething();
updateSomething();

rect {
    stroke: red;
    stroke-width: 2;
}

.task0 {
    fill: green;
    stroke-width: 5;
}

.task1 {
    fill: orange;
    stroke-width: 5;
}

 <div id="svgContainer" class="svgContainer">
    <svg id='editorSvg' class='editorSvg' xmlns="http://www.w3.org/2000/svg">
      <rect id="svg-rect-0" x="10" y="10" width="50" height="50" class="task" ></rect>
    </svg>
  </div>

Answer 1

代码似乎正常工作。至少在Chrome中。

请注意，通过CSS属性（width设置style.width="100"是SVG 2，尚不能在所有浏览器中使用。例如，目前，它可以在Chrome中运行，但不能在Firefox中运行。

另一个问题是，在CSS中，属性应该具有单位。因此，从技术上讲，您应该编写rect0.style.width = "100px";（请注意px）

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

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

设置class的方式看起来不错。我看不出有什么理由要破坏宽度以外的任何东西。

更新

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

您可以这样做：

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");
  }
}

https://stackblitz.com/edit/angular-ytqmvv

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

1 个答案: