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+的一個有趣的文檔。