我有一个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中动态着色图形

更新：

回答

相关问题