我有一个 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如果我将任何特定于 Angular 代码放入 svg 文件中，以显示渲染问题。
最佳答案
您无法在 <object> 中获取对元素的引用通过ViewChild
作为解决方法，我可以为您提供以下方式:
查看:
<object ... #svg (load)="load(svg.contentDocument)"></object>
组件
load(svgDoc) {
let box1 = svgDoc.getElementById("station1");
}
另请参阅实际操作 Plunker
关于javascript - Angular2 中的动态着色图形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40196426/