Angular 2 : how to add/change css style in svg?

Question

我有以下代码将 svg 添加到 angular2 组件的模板:

<object type="image/svg+xml" data="kiwi.svg" class="logo">
  Kiwi Logo
</object>

为了动态添加css样式，我尝试了几种获取内容的方法:

1)

public ngAfterViewInit(): void {
        this.el = this._doc.getElementsByTagName('svg');
        console.log(this.el);
    }

控制台结果:[]

2)

public ngAfterViewInit(): void {
  this.el = this._elementRef.nativeElement.querySelector('object');
  console.log(this.el);
}

控制台结果:null

问题:

任何人都可以帮助我了解如何访问 svg 以及如何在 typescript 中更改 css 样式吗？

Answer 1

这里有两个问题:首先，您没有使用内联 svg，因此如此处引用 Changing color of SVG which was embedded using <object> ，因此您将无法更改 svg 样式，例如元素的填充。这不是 Angular 问题。

为了以实用的方式在 Angular 上做到这一点，我建议创建一个在其 html 上具有完整 svg 的组件:

svg-component.html

<!-- svg-component.html, where we bind some properties of the svg-->
<svg.... [style.fill]="color"/></svg>

svg-component.ts,

// svg-component.ts, where we  map to inputs these properties for easy 
import { Component, OnInit, Input } from '@angular/core';

@Component({
 ...
})
export class SvgComponent implements OnInit {
  @Input color = '#fff'; 
  ...
}

用法:

<svg-component color="#000"></svg-component>

.

另一个想法是尝试复制图标库的方法并创建字体，但除非它是一个非常大的集合并且您想使用字体 css 属性并几乎创建一个库，否则我会投反对票。