Question

尝试将svg组旋转deg in

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

解决方案：

这对我有用，

:transform="rotateShape(index)"

方法，

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

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

Answer 1

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

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

Vue绑定SVG变换旋转

1 个答案: