Vue Bind SVG преобразование повернуть - PullRequest
Новая
       9

Vue Bind SVG преобразование повернуть

0 голосов
/ 18 октября 2018

Попытка повернуть группу svg на величину в 

data():{ 
     deg: 90,
     groupCenter: [100,200]
}

Я искал, но не могу найти правильный синтаксис для привязки данных к функции svg rotate, 

:transform="{'rotate(' + deg + ' ' + groupCenter[0] + ' ' + groupCenter[1] + ')'}"

Я пытаюсь добавить это в круг, подобный этому, 

<circle style="mix-blend-mode: multiply;" v-for="(el,index) in element.coords" :fill="el.color" :key="index" :r="el.radius" :cy="el.y" :cx="el.x" :transform="{'rotate(' + deg + ' ' + groupCenter[0] + ' ' + groupCenter[1] + ')'}" />

Я получаю, 

- invalid expression: Unexpected token + in

    {'rotate(' + deg + ' ' + groupCenter[0] + ' ' + groupCenter[1] + ')'}

  Raw expression: :transform="{'rotate(' + deg + ' ' + groupCenter[0] + ' ' + groupCenter[1] + ')'}"

РЕШЕНИЕ:

Это сработало для меня, используя метод

:transform="rotateShape(index)"

И метод 

rotateShape(){
              return "rotate(" + this.deg + " 0 0)"
            },

Но я не знаю, почему первоначальная попытка не сработала.

...