Angular2レンダラー：Svg rectはレンダリングされますが、ページに表示されません

Question

バーとしてrectを持つSVGを使用して棒グラフを作成したいと思います。

関連するコードは、次のように

棒グラフ-one.html

<svg #svgone width="400" height="250" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 250"> 
    <g #abcd></g> 
</svg> 

棒グラフ-one.ts

import { Component, Renderer2, ViewChild, ElementRef } from '@angular/core'; 

    @Component({ 
    selector: 'barchart-one', 
    templateUrl: 'barchart-one.html' 
    }) 
    export class BarchartOneComponent { 
    @ViewChild('abcd') 
    private abcd: ElementRef; 
    constructor(private renderer: Renderer2) {} 

    ngAfterViewInit() { 
     for (var i = 1; i < 8; i++) { 
      let height = Math.floor(Math.random() * (140 - 110)) + 110; 
      const rect = this.renderer.createElement('rect'); 
      this.renderer.setAttribute(rect, 'height', height); 
      this.renderer.setAttribute(rect, 'rx', '6'); 
      this.renderer.setAttribute(rect, 'ry', '6'); 
      this.renderer.setAttribute(rect, 'width', '12'); 
      this.renderer.setAttribute(rect, 'x', (i*50)+20); 
      this.renderer.setAttribute(rect, 'y', (220-height)); 
      this.renderer.appendChild(this.abcd.nativeElement, rect); 
      console.log(rect); 
     }; 
    } 
    } 

はSVGの結果がレンダリング：

<g> 


<rect height="126" rx="6" ry="6" width="12" x="70" y="94"></rect> 
<rect height="122" rx="6" ry="6" width="12" x="120" y="98"></rect> 
<rect height="124" rx="6" ry="6" width="12" x="170" y="96"></rect> 
<rect height="116" rx="6" ry="6" width="12" x="220" y="104"></rect> 
<rect height="139" rx="6" ry="6" width="12" x="270" y="81"></rect> 
<rect height="123" rx="6" ry="6" width="12" x="320" y="97"></rect> 
<rect height="137" rx="6" ry="6" width="12" x="370" y="83"></rect> 
</g> 

期待される結果はn rectのコードが正しくレンダリングされても、ページに表示されません。

Answer 1

createElementでSVG要素を作成することはできません。createElementNSを使用し、SVG名前空間、つまりhttp://www.w3.org/2000/svgを最初のパラメータとして渡す必要があります。

this.renderer.createElementNS('http://www.w3.org/2000/svg', 'rect');