Javascript Angular2渲染器：Svg rect已渲染，但未显示在页面中

我想使用SVG创建一个条形图，并将rect作为条形图

相关代码如下：

barchart-one.html

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

barchart-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);
        };
    }
    }

从'@angular/core'导入{Component，renderr2，ViewChild，ElementRef}；
@组成部分({
选择器：'条形图一'，
templateUrl:'barchart one.html'
})
导出类BarchartOneComponent{
@ViewChild（'abcd'）
私人abcd:ElementRef；
构造函数（私有呈现器：Renderer2）{}
ngAfterViewInit（）{
对于（变量i=1；i<8；i++）{
让高度=数学地板（数学随机（）*（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'）；
setAttribute（rect，'width'，'12'）；
setAttribute（rect，'x'，（i*50）+20）；
setAttribute（rect，'y'，（220高度））；
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>

---

即使正确呈现了rect的代码，预期结果也不会显示在页面中。

不能使用createElement创建SVG元素，必须使用CreateElements并传递SVG命名空间，即作为第一个参数

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

---

不能使用createElement创建SVG元素，必须使用CreateElements并传递SVG名称空间，即作为第一个参数

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

---

这是一个老问题，但是，也许将来有人会发现它很有用。有一个名为Angular的模块，它允许轻松创建多个SVG元素并在站点上绘制它们。还有很多与这些元素的不同交互

您的html代码如下所示-

<svg-container containerId="barChart" height="500">
  <svg-rect height="126" width="12" color="#000" x="70" y="94"></svg-rect>
  <svg-rect height="122" width="12" color="#000" x="120" y="98"></svg-rect>
  <svg-rect height="124" width="12" color="#000" x="170" y="96"></svg-rect>
  <svg-rect height="116" width="12" color="#000" x="220" y="104"></svg-rect>
  <svg-rect height="139" width="12" color="#000" x="270" y="81"></svg-rect>
  <svg-rect height="123" width="12" color="#000" x="320" y="97"></svg-rect>
  <svg-rect height="137" width="12" color="#000" x="370" y="83"></svg-rect>
</svg-container>

---

上面的代码将自动创建并绘制您想要的图表。

这是一个老问题，但是，也许将来有人会发现它很有用。有一个名为Angular的模块，它允许轻松创建多个SVG元素并在站点上绘制它们。还有很多与这些元素的不同交互

您的html代码如下所示-

<svg-container containerId="barChart" height="500">
  <svg-rect height="126" width="12" color="#000" x="70" y="94"></svg-rect>
  <svg-rect height="122" width="12" color="#000" x="120" y="98"></svg-rect>
  <svg-rect height="124" width="12" color="#000" x="170" y="96"></svg-rect>
  <svg-rect height="116" width="12" color="#000" x="220" y="104"></svg-rect>
  <svg-rect height="139" width="12" color="#000" x="270" y="81"></svg-rect>
  <svg-rect height="123" width="12" color="#000" x="320" y="97"></svg-rect>
  <svg-rect height="137" width="12" color="#000" x="370" y="83"></svg-rect>
</svg-container>

---

上面的代码将自动创建并绘制所需的图表。

能否提供一些示例。能否提供一些示例。