javascript - Angular2渲染器: Svg rect is rendered but not showing in page

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>

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

Answer 1

您无法使用 createElement 创建 SVG 元素，您必须使用 createElementNS 并传递 SVG 命名空间，即 http://www.w3.org/2000/svg作为第一个参数。

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