时间戳

首页 > 解决方案 > Vue绑定SVG变换旋转

svg - Vue绑定SVG变换旋转

问题描述

尝试将 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)"
            },

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

标签： svgvue.jsrotationbind

解决方案

transform 属性需要评估为一个字符串 - ie transform="rotate(90deg)"，所以我认为你需要连接一些部分字符串：

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

推荐阅读