如何通过angular4的.ts文件创建一个简单的svg三角形？

Question

我想通过Angular项目的.ts文件创建一个简单的三角形。目前我在我的.ts文件中通过其路径使用svg图像。但是我无法为保存的图像应用填充属性。所以我想在我的.ts文件中创建一个单独的svg三角形，而不是在我的html文件中。任何人都可以帮我解决这个问题。请在此堆叠闪电战链接https://stackblitz.com/edit/angular-van3zw上创建一个简单的三角形。任何人都可以提供任何类型的帮助。谢谢。

Answer 1

您可以使用Renderer2，除非您必须设置svg的命名空间来执行此操作：

@ViewChild('svgContainer') container: ElementRef;

constructor(private renderer: Renderer2) { }

ngOnInit() {
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    this.renderer.setAttribute(path, 'd', 'M0 50 L100 0 L100 100 Z');
    this.renderer.setAttribute(path, 'fill', 'pink');
    this.renderer.setAttribute(path, 'transform', 'rotate(30, 50, 50)');
    this.renderer.appendChild(svg, path);
    this.renderer.appendChild(this.container.nativeElement, svg);
}

在你的模板.html中：

<div #svgContainer></div>

例子https://stackblitz.com/edit/angular-nodrwb?embed=1&file=src/app/hello.component.ts

但我的意见是用html创建它并从ts操纵。 component.html

<svg>
    <path [attr.d]="path" [attr.fill]="fillColor" [attr.transform]="rotation">
</svg>

component.ts

path = 'M0 50 L100 0 L100 100 Z';
fillColor = 'pink';
angle = 30;
rotation = `rotate(${angle}, 50, 50)`;