Элемент строки SVG не отображается, пока я не наведу указатель мыши на

Question

  <svg class="lineSVG" width="125" height="48">
      <line class="line" [attr.x1]="lineStart" [attr.x2]="lineStart" y1="14" y2="10" stroke="black" />
      <line class="line" [attr.x1]="lineStart" [attr.x2]="lineEnd" y1="12" y2="12" fill="black" stroke="black" />
      <line class="line" [attr.x1]="lineEnd" [attr.x2]="lineEnd" y1="14" y2="10" stroke="black" />
      <circle style="stroke-width: 4px;" [attr.cx]="(ratingvalue * 24) - 12" cy="12" r="5" fill="none" stroke="green" />
  </svg>

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

Заранее спасибо!

Answer 1

Что ж, если кто-то еще столкнется с этой проблемой, я просто вызвал detectChanges на ChangeDetectorRef, и строки правильно отображаются при загрузке

    public ngOnInit() {this.cdRef.detectChanges();}