Vue绑定SVG变换旋转

Question

尝试将svg组旋转deg量

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

我已经搜索了但找不到正确的语法来将数据绑定到svg旋转功能，

: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] + ')'}"

SOLUTION：

这使用一种方法对我有用，

:transform="rotateShape(index)"

和方法，

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

但是我不知道为什么最初的尝试不起作用。

Answer 1

[transform属性需要计算为字符串-即transform="rotate(90deg)"，所以我认为您需要连接一些部分字符串：

:transform="'rotate(' + deg + ' deg)'"