Angular2渲染器：Svg矩形被渲染，但不在頁面中顯示

Question

我想創建一個使用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即使代碼正確呈現，也不會在頁面中顯示。

Answer 1

您不能使用createElement創建SVG元素，您必須使用createElementNS並傳遞SVG名稱空間，即http://www.w3.org/2000/svg作爲第一個參數。

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