Добавить новый элемент в SVG в Angular - PullRequest
Новая
       11

Добавить новый элемент в SVG в Angular

2 голосов
/ 08 апреля 2019

Я пытаюсь добавить новый элемент в SVG в Angular после того, как получаю некоторые данные из базы данных, но два метода, которые я пытался, не работают.

Я пытался использовать * ngFor вhtml 

              <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, но они не видны.

1 Ответ

0 голосов
/ 16 апреля 2019

Почему бы вам не попробовать библиотеку 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, e.t.c.

...