Как задать ширину svg при помощи переменной?

Question

[zlodiak]

Я пытаюсь задать ширину svg при помощи атрибута viewBox. В результате должен получиться svg, который при изменении ширины окна тоже изменяет свою ширину.

Проблема в том, что я использую переменную, значение которой задаётся в компоненте:

<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>

Но независимо от значения переменной в консоль выводится сообщение об ошибке:

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

Как это исправить?

ДЕМО

Answer 1

[0xD34F]

Во-первых - вы явно путаете ширину с высотой. Во-вторых - [attr.viewBox]="'0 0 100 ' + bla".

Answer 2

[Дмитрий Лузанов]

<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>