Html SVG的动态CSS

发布于10月09日

在Angular 上，我显示了一个SVG:

<div [innerHTML]="svgImage" class="center">
</div>

SVG包含具有唯一ID的多边形，例如:

<polyline id="tp_31" fill="#FFFAEC" points="698.814,494.607 719.188,459.31 698.813,424.014 658.064,424.015 637.69,459.313
        658.065,494.608 698.814,494.607     "/>

我可以使用id Select 器在SCSS文件中分别设置每个多边形的样式:

#tp_31:hover {
  fill: blue;
}

然而，我不确定如何动态地做到这一点.SVG图像将来自服务器，我想以编程方式设置它的样式.我怎样才能最好地做到这一点呢？我试过使用[ngStyle]，但我不确定如何将其与id Select 器一起使用.谢谢!

推荐答案

要对注入了[innerHTML]="svgImage"的SVG中的元素进行动态样式设置，可以在呈现后使用ANGLE的Renderer2来操作SVG内容.

创建一个ViewChild以引用容器:

import { ElementRef, ViewChild, Renderer2 } from '@angular/core';

@ViewChild('svgContainer') svgContainer: ElementRef;
    
constructor(private renderer: Renderer2) {}

使用[innerHTML]注入SVG内容:

<div #svgContainer [innerHTML]="svgImage" class="center"></div>

使用Renderer2设置样式:

ngAfterViewInit() {
  const container = this.svgContainer.nativeElement;

  const polygon = container.querySelector('#tp_31');

  this.renderer.setStyle(polygon, 'fill', 'blue');
  this.renderer.setStyle(polygon, 'stroke', 'red');
}