直到我将鼠标悬停在 SVG 线元素上才会呈现答案

【问题标题】：SVG line element not rendering until I hover mouse over直到我将鼠标悬停在 SVG 线元素上才会呈现
【发布时间】：2020-10-06 15:27:44
【问题描述】：

  <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>

我在线条上没有悬停样式，并且圆形元素在加载时正确呈现。我完全不知道为什么在我将鼠标移到它们上方之前这些线条无法正确显示。

提前致谢！

【问题讨论】：

标签： html css angular svg

【解决方案1】：

如果其他人遇到这个问题，我只是在 ChangeDetectorRef 上调用了 detectChanges，并且这些行在加载时会正确呈现

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

【讨论】：