title: Dynamically Colouring graphic in Angular2
body: <p>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:</p>
  <p><a href="https://i.stack.imgur.com/OAm5P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OAm5P.png" alt="enter image description here" /></a></p>
  <p>Which is an svg, so I had thought that I would manually tag the boxes with a <code>#box1</code>, so I could do something like<code>@ViewChild('box1') stage1: ElementRef;</code>, however, any angulr2 additions seem to stop the svg rendering.</p>
  <p>My template currently has <code>&lt;object id=&quot;img&quot; data=&quot;assets/img/big_layout.svg&quot; width=&quot;292&quot; height=&quot;164&quot;&gt;&lt;/object&gt;</code> in it.</p>
  <p>How can I create an image like this and programmatically change parts of its colour?</p>
  <p>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?</p>
  <h1>Update:</h1>
  <p>Here is a <a href="https://plnkr.co/edit/mlzeRpdtYTzbia98Vn0y?p=preview" rel="nofollow noreferrer">plunk</a> to show the rendering issues if I put any angular specific code into the svg file.</p>