我有一個angular2應用程序，在我的一個組件中，我想顯示系統各個元素的性能。所以，我有以下圖文：在Angular2中動態着色圖形

這是一個SVG，所以我原以爲我會手動與#box1標籤的箱子，所以我可以做一些像@ViewChild('box1') stage1: ElementRef;，然而，任何angulr2增加似乎停止svg渲染。

我的模板目前有<object id="img" data="assets/img/big_layout.svg" width="292" height="164"></object>在裏面。

如何創建一個像這樣的圖像並以編程方式更改部分顏色？

我想也許這可以在div中使用和使用css，但這將是瘋狂的難以得到它的所有規模正常，但如果有某種方式來產生這個，這可能是一個選擇？

更新：

這裏是一個plunk顯示渲染的問題，如果我把任何角度特定代碼到SVG文件。

來源

2016-10-22 George Edwards

你可以在Plunker中重現嗎？ –

@GünterZöchbauer你想讓我重現什麼？我希望有人建議一種方法，因爲我相信我的根本上有缺陷... –

請告訴我們你已經嘗試了什麼，以片段，小提琴，plunkr等形式嘗試。然後，我們可以看到你在做什麼，而不是猜測。 –

無法通過ViewChild

得到參考裏面<object>元素作爲解決辦法，你我可以爲您提供以下方式：

觀點：

<object ... #svg (load)="load(svg.contentDocument)"></object>

組件

load(svgDoc) { 
    let box1 = svgDoc.getElementById("station1"); 
}

另請參閱此操作Plunker

來源

2016-10-23 08:52:59 yurzui

你有什麼想法我可以單元測試這個功能嗎？什麼是'svg.contentDocument'？我嘗試加載svg文件作爲字符串，但沒有工作... –

它的'XMLDocument'。你可以使用下面的'let svgDoc = new DOMParser（）。parseFromString（ ''， 'application/xml'）;'See also http://stackoverflow.com/questions/9723422/is-there-some-innerhtml-replacement-in-svg-xml – yurzui

在Angular2中動態着色圖形

更新：

回答

相關問題