在Angular2中动态着色图形

Question

I have an angular2 app, and in one of my components, I want to display the performance of various elements of a system. So I have the following graphic:

Which is an svg, so I had thought that I would manually tag the boxes with a #box1 , so I could do something like @ViewChild('box1') stage1: ElementRef; , however, any angulr2 additions seem to stop the svg rendering.

My template currently has <object id="img" data="assets/img/big_layout.svg" width="292" height="164"></object> in it.

How can I create an image like this and programmatically change parts of its colour?

I thought maybe this could be drawn in divs and use css, but that would be crazy difficult to get it all to scale properly, but if there is some way to generate this, that could be an option?

Update:

Here is a plunk to show the rendering issues if I put any angular specific code into the svg file.

Answer 1

You can't get reference to element inside <object> via ViewChild

As workaround you i can offer you the following way:

view:

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

component

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

See also this in action Plunker