Question

从数据库中检索一些数据后，我试图在Angular中的SVG中添加新元素，但是我尝试的2种方法似乎无效。

我尝试在HTML中使用* ngFor

              <svg version="1.1" id="room" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 953.7 792.9" style="enable-background:new 
0 0 953.7 792.9;" xml:space="preserve">
              <style type="text/css">
                    .st0{fill:none;stroke:#3D3D3D;stroke-width:7;stroke- 
miterlimit:10;}
                    .st1{fill:#55BEFF;}
              </style>
              <g>
                    <rect *ngFor="let zone of spaceData" [attr.id]=zone.id 
[attr.x]=zone.x [attr.y]=zone.y [attr.class]=zone.class 
[attr.width]=zone.width [attr.height]=zone.height />
              </g>
              </svg>

并在初始化期间进行构建

var svgEle = document.getElementById('room');
  this.spaceData.forEach(element => {
    var rect = document.createElementNS('http://www.w3.org/2000/svg', 
'rect');
    rect.setAttribute('id', element.id);
    rect.setAttribute('x', element.x);
    rect.setAttribute('y', element.y);
    rect.setAttribute('class', element.class);
    rect.setAttribute('width', element.width);
    rect.setAttribute('height', element.height);
    svgEle.append(rect);

  });

但是它们似乎都不起作用。如果我检查元素，则矩形会出现在svg中，但不可见。

Answer 1

为什么不尝试使用ngx-svg库。它允许轻松创建SVG容器和不同类型的svg元素。您可以检查svg-rect，其中包含您列出的所有必要元素。

您唯一要做的更改是将element.class更改为element.classes数组（将字符串转换为字符串数组，从而允许将多个类附加到元素）。

示例代码，您可以在该库的HTML中使用该示例代码，该示例代码将创建容器并自动分配元素-

<svg-container containerId="rectangulars">
  <svg-rect *ngFor="let element of spaceData" [height]="element.height" [width]="element.width" [classes]="element.classes" [x]="element.x" [y]="element.y"></svg-rect>
</svg-container>

如果您还需要其他任何元素，例如svg-circle，svg-polygon，svg-line等，

在Angular中向SVG添加新元素

1 个答案: