Angular2：如何添加/更改svg中的CSS样式？

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); 
} 

结果控制台：空

问：

谁能帮助我了解如何访问SVG和如何更改CSS样式的打字稿？

Answer 1

您可以直接inserti代码的svg

HTML：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"> 
    <g> 
    <path id="myId" d="..."/> 
    </g> 
</svg> 

CSS：

#myId { 
    fill: red; 
} 

打字稿：你可以使用jQuery

import $ from 'jquery'; 

this.el = $("#myId"); 

编辑：

如下评论，你也可以使用document.getElementById("myId")没有进口的jQuery

Answer 2

这个问题是目前所缺乏重要的细节，但它看起来像另一个XY Problem。您处于Angular模板域中：请勿使用DOM方法获取元素并更改其样式，请使用和属性绑定。

因为我不知道你想特别添加什么CSS，这里有几个通用的例子：

选项1

使用[ngClass]结合改变单一类。

模板：

<object type="image/svg+xml" 
     data="kiwi.svg" 
     [ngClass]="kiwiClass"> 
    Kiwi Logo 
</object> 

组件：

// Reassign this as needed 
kiwiClass = "logo"; 

选项2

使用[ngClass]以介导（相对小的）类列表

模板的状态：

<object type="image/svg+xml" 
     data="kiwi.svg" 
     class="logo" 
     [ngClass]="{'red': shouldBeRed, 'blue': checkShouldBeBlue()}"> 
    Kiwi Logo 
</object> 

然后在你的样式表，添加你需要的.red和.blue类的样式，以及shouldBeRed和shouldBeBlue条件语句。

[ngClass] es是基于评估为布尔值的任何事物分配的，所以这些也可以是函数。

选项3

使用[class.className]调解（相对小的）类列表的状态

模板：

<object type="image/svg+xml" 
     data="kiwi.svg" 
     class="logo" 
     [class.red]="shouldBeRed" 
     [class.blue]="checkShouldBeBlue()"> 
    Kiwi Logo 
</object> 

将您的风格和条件与作为选项2.

以下是关于using SVG with angular 2+的一个有趣的文档。