CODEWITHSUNDEEP
svgvue.jsrotationbind
ofey
ofey

Reputation: 3347

Vue bind SVG transform rotate

Trying to rotate an svg group by an amount deg in 

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

I have searched but can't find the correct syntax to bind data to the svg rotate function,

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

I am trying to add this to a circle like this,

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

I get,

- invalid expression: Unexpected token + in

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

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

SOLUTION:

This worked for me using a method,

:transform="rotateShape(index)"

And the method,

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

But I don't know why the initial attempt wouldn't work.

Upvotes: 0

Views: 2697

Answers (2)

pwinty
pwinty

Reputation: 41

This is a great place to use javascript's template literals.

:transform="`rotate(${deg} deg)`"

Upvotes: 0

StevieP
StevieP

Reputation: 401

The transform attribute needs to evaluate to a string - i.e. transform="rotate(90deg)", so I think you need to concatenate some partial strings:

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

Upvotes: 1

Related Questions