SVG, Vue: Почему не работает реактивное свойство viewBox?

Question

[Tyusha]

Масштабирую по классике svg-картинку. Если прописать размеры и viewBox напрямую, то всё ОК. Но если viewBox сделать реактивным, то не работает. Парадокс. Смотрите песочницу.

viewbox = '0 0 450 10'— реактивное свойство в объекте Vue

<svg width=300px height=75px viewbox="0 0 450 100">...</svg>   //  Масштабирование работает
<svg width=300px height=75px :viewbox="viewbox">...</svg>        //  Масштабирование не работает
<svg width=300px height=75px :viewbox="'0 0 450 100'">...</svg>        //  Ну и даже так тоже не работает

https://jsfiddle.net/y0zgefs8/

Answer 1

[Ankhena]

Замените в разметке на :view-box.camel="viewbox"
Кстати, я нагуглила ответ за 1,5 минуты.

Comments

[Adamos]

Как-то вы медленно гуглите. Вторая же ссылка, счет на секунды ;)

[Ankhena]

Adamos, старость не радость, ага. Я ещё проверяю, что нагуглила, кстати.

[Tyusha]

Спасибо. Работает.

[Антон Антон]

Да и это не нужно будет, если использовать sfc, судя по докам

Answer 2

[Adamos]

https://forum.vuejs.org/t/best-way-to-make-svg-vie...