Unable to understand, Why parts of SVG are not drawn initially when generated from angular component?

Issue

I am trying to implement a stacked bar chart in angular, for achieving it, i have created two angular components, one implements axis. Another implements bar graph and uses axis component.

Following is generated SVG (copied from DOM).

<svg _ngcontent-pyu-c226="" xmlns="http://www.w3.org/2000/svg" width="460" height="400"><g _ngcontent-pyu-c226="" transform="translate(50, 10)"><g _ngcontent-pyu-c226="" _nghost-pyu-c215="" ng-reflect-scale="function scale(d) {
    var ke" ng-reflect-orient="3" transform="translate(0,370)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" class="domain" d="M0.5,6V0.5H380.5V6"></path><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(54.28571428571432,0)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" y2="6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" y="9" dy="0.71em"> banana </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(144.7619047619048,0)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" y2="6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" y="9" dy="0.71em"> poacee </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(235.23809523809524,0)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" y2="6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" y="9" dy="0.71em"> sorgho </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(325.7142857142857,0)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" y2="6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" y="9" dy="0.71em"> triticum </text></g><!--bindings={
  "ng-reflect-ng-for-of": "banana,poacee,sorgho,triticum"
}--><!--ng-container--><!--bindings={
  "ng-reflect-ng-if": "function scale(d) {\n    var ke"
}--></g><!--bindings={
  "ng-reflect-ng-if": "function scale(d) {\n    var ke"
}--><g _ngcontent-pyu-c226="" _nghost-pyu-c215="" ng-reflect-scale="function scale(x) {
    return" ng-reflect-orient="4" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" class="domain" d="M-6,370.5H0.5V0.5H-6"></path><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,370.5)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 0 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,329.38888888888886)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 1 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,288.27777777777777)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 2 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,247.16666666666669)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 3 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,206.05555555555557)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 4 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,164.94444444444443)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 5 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,123.83333333333334)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 6 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,82.72222222222221)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 7 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,41.61111111111113)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 8 </text></g><g _ngcontent-pyu-c215="" opacity="1" class="tick" transform="translate(0,0.5)"><line _ngcontent-pyu-c215="" stroke="rgb(0, 0, 0)" x2="-6"></line><text _ngcontent-pyu-c215="" fill="rgb(0, 0, 0)" x="-9" dy="0.32em"> 9 </text></g><!--bindings={
  "ng-reflect-ng-for-of": "0,1,2,3,4,5,6,7,8,9"
}--><!--ng-container--><!--bindings={
  "ng-reflect-ng-if": "function scale(x) {\n    return"
}--></g><!--bindings={
  "ng-reflect-ng-if": "function scale(x) {\n    return"
}--><g _ngcontent-pyu-c226=""><g _ngcontent-pyu-c226=""><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-1)" x="18.09523809523813" y="328.88888888888886" height="41.11111111111114" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-1)" x="108.5714285714286" y="287.77777777777777" height="82.22222222222223" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-1)" x="199.04761904761907" y="328.88888888888886" height="41.11111111111114" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-1)" x="289.5238095238095" y="370" height="0" width="72.38095238095238"></rect><!--bindings={
  "ng-reflect-ng-for-of": "0,1,0,2,0,1,0,0"
}--></g><g _ngcontent-pyu-c226=""><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-2)" x="18.09523809523813" y="287.77777777777777" height="41.111111111111086" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-2)" x="108.5714285714286" y="164.44444444444443" height="123.33333333333334" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-2)" x="199.04761904761907" y="287.77777777777777" height="41.111111111111086" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-2)" x="289.5238095238095" y="287.77777777777777" height="82.22222222222223" width="72.38095238095238"></rect><!--bindings={
  "ng-reflect-ng-for-of": "1,2,2,5,1,2,0,2"
}--></g><g _ngcontent-pyu-c226=""><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-3)" x="18.09523809523813" y="246.66666666666669" height="41.111111111111086" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-3)" x="108.5714285714286" y="0" height="164.44444444444443" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-3)" x="199.04761904761907" y="246.66666666666669" height="41.111111111111086" width="72.38095238095238"></rect><rect _ngcontent-pyu-c226="" fill="var(--avl-graph-color-3)" x="289.5238095238095" y="246.66666666666669" height="41.111111111111086" width="72.38095238095238"></rect><!--bindings={
  "ng-reflect-ng-for-of": "2,3,5,9,2,3,2,3"
}--></g><!--bindings={
  "ng-reflect-ng-for-of": "0,1,0,2,0,1,0,0,1,2,2,5,1,2,0,"
}--></g></g></svg>

And below is how it looks on my UI.

Noted, both X and Y axis does not rendered.

But most weird thing is if I use developer tools of browser to copy SVG code and remove SVG from DOM and reinsert it using Edit HTML, it renders everything correctly.

I have tried it on FireFox, Chrome and Edge(chromium) result is same everywhere. So, I don't think it is browser issue.

Any idea, what should be going on? How i can fix it?

Template of stacked-bar-graph component

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

Template of axis component (selector = 'g[sneAxis],svg[sneAxis]')

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

Solution

As Robert Longson suggested, It was due to namespace, I was able to solve it by wrapping contents of axis component in svg tag.

But I think this can also be solved by renaming axis component's template file to use .svg extension.

Answered By - goyaltushar92