How to set width of svg using variable?

Question

Angular

I'm trying to set the width of an svg using the viewBox attribute. The result should be an svg that, when the window width changes, also changes its width.
The problem is that I'm using a variable whose value is set in the component:

<svg viewBox="0 0 100 bla">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg>

But regardless of the value of the variable, an error message is displayed in the console.

Template parse errors:
Can't bind to 'viewBox' since it isn't a known property of ':svg:svg'. ("
]viewBox="0 0 100 {{bla}}">

Please help fix this
DEMO

Answer 1

<svg [attr.viewBox]="'0 0 100 ' + bla">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg>

Answer 2

First, you are clearly confusing width with height. Second, replace viewBoxwith attr.viewBox.