Angular 无法理解，当从角度组件生成SVG时，为什么最初不绘制SVG的部分？

我正在尝试用angular实现堆叠条形图，为了实现它，我创建了两个angular组件，一个实现axis。另一个实现条形图并使用轴组件

以下是生成的SVG（从DOM复制）

香蕉波西甜高粱小麦01 2 3 4 5 6 7 8 9

下面是它在我的UI上的外观

注意，X轴和Y轴都不渲染

但最奇怪的是，如果我使用浏览器的开发工具复制SVG代码，并从DOM中删除SVG，然后使用编辑HTML重新插入它，它会正确地呈现所有内容

我在FireFox上试用过，Chrome和Edge（Chrome）的效果在任何地方都是一样的。所以，我不认为这是浏览器的问题

你知道怎么回事吗？我怎么能修好它

堆叠条形图组件的模板

<svg [attr.width]="width + margins.right + margins.left" [attr.height]="height + margins.top + margins.bottom" xmlns="http://www.w3.org/2000/svg">
  <g [attr.transform]="'translate(' + margins.left+ ', ' + margins.top +')'">
    <g [attr.transform]="'translate(0,' + this.height + ')'" [sneAxis]="xAxisScale" [orient]="Orientation.bottom">
    </g>
    <g [sneAxis]="yAxisScale" [orient]="Orientation.left" ></g>
    <g>
      <g *ngFor="let stackItem of stackedData">
        <rect *ngFor="let rect of stackItem;" [attr.fill]="color(stackItem.key)"
          [attr.x]="xAxisScale(groupBy(rect.data))" [attr.y]="yAxisScale(rect[1])"
          [attr.height]="yAxisScale(rect[0]) - yAxisScale(rect[1])" [attr.width]="xAxisScale.bandwidth()"></rect>
      </g>
    </g>
  </g>
</svg>

轴组件的模板（选择器='g[sneAxis]，svg[sneAxis]'）

{{format}pureFunctionCall:value}

如果仅在复制时绘制对象，则通常表明它们最初是在错误的名称空间（通常是HTML名称空间而不是SVG名称空间）中创建的。复制它们会自动更正名称空间。@RobertLongson，是的，你是对的。这是名称空间的问题。我能够通过将所有内容移动到一个组件来解决它。

<svg [attr.width]="width + margins.right + margins.left" [attr.height]="height + margins.top + margins.bottom" xmlns="http://www.w3.org/2000/svg">
  <g [attr.transform]="'translate(' + margins.left+ ', ' + margins.top +')'">
    <g [attr.transform]="'translate(0,' + this.height + ')'" [sneAxis]="xAxisScale" [orient]="Orientation.bottom">
    </g>
    <g [sneAxis]="yAxisScale" [orient]="Orientation.left" ></g>
    <g>
      <g *ngFor="let stackItem of stackedData">
        <rect *ngFor="let rect of stackItem;" [attr.fill]="color(stackItem.key)"
          [attr.x]="xAxisScale(groupBy(rect.data))" [attr.y]="yAxisScale(rect[1])"
          [attr.height]="yAxisScale(rect[0]) - yAxisScale(rect[1])" [attr.width]="xAxisScale.bandwidth()"></rect>
      </g>
    </g>
  </g>
</svg>

<ng-container *ngIf="scale">
  <path stroke="rgb(0, 0, 0)" class="domain" [attr.d]="domainPathD"></path>
  <g opacity="1" [attr.transform]="transform | pureFunctionCall : (position | pureFunctionCall :value)" class="tick"
    *ngFor="let value of values">
    <line stroke="rgb(0, 0, 0)" [attr.x2]="x === 'x' ? k * tickSizeInner : null"
      [attr.y2]="x === 'y' ? k * tickSizeInner : null"></line>
    <text fill="rgb(0, 0, 0)" [attr.x]="x === 'x' ? k * spacing : null" [attr.y]="x === 'y' ? k * spacing: null"
      [attr.dy]="dy">
      {{  format | pureFunctionCall : value }}
    </text>
  </g>
</ng-container>