Question

我想通过Angular项目的.ts文件创建一个简单的三角形。目前，我正在通过.ts文件中的路径使用svg图像。但是我无法为该保存的图像应用填充属性。所以我想在我的.ts文件中而不是在html文件中创建一个单独的svg三角形。谁能帮我解决这个问题。请在此堆栈闪电链接上创建一个简单的三角形 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)`;

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

1 个答案: