CODEWITHSUNDEEP
javascripthtmlsvg
Victor Chu
Victor Chu

Reputation: 11

Flip SVG object using javascript

I'm facing a problem when I was trying to flip an SVG object using javascript. I have searched for several methods to flip the svg object direction like:

<g id = "object1" transform = "scale(-1,1) translate(-100,0)">
//code of svg object
</g>

When I was trying to apply similar code in my js file, it failed to flip the object.

svgdoc = evt.target.ownerDocument;
var node = svgdoc.getElementById("object1");
node.onclick = function(){
  node.style.setProperty("scale", "(-1,1)",null);
  node.style.setProperty("translate", "(-100,1)",null);
}

p.s. the svg object is coded in the .svg file and the above js code is coded in another .js file

Upvotes: 1

Views: 1968

Answers (2)

Kaiido
Kaiido

Reputation: 137133

You can use style for svg elements too. But there is no CSS property called scale or translate.
These functions are part of the transform property, which is also present as an SVG attribute like set in your markup, with a slightly different syntax, e.g, CSS does need an unit to work, and doesn't understand SVG's magic [no-]unit.

Since CSS styles do take the priority over corresponding attributes, you don't need to modify your attributes and simply modify your code so that you set the CSS transform attribute to both the functions you were trying to set, but this time as a single string-rule:

var node = document.getElementById("object1");
node.onclick = function(){
  // set both functions as a single rule.
  node.style.setProperty("transform", "scale(1,-1) translate(0px,-400px)",null);
}
#object1{
  transition: transform 2s ease;
}
<svg viewBox="0 0 400 400" width="100" height="100">
<g id = "object1" transform = "scale(-1,1) translate(-400,0)">
<path d="M 100 100 L 300 100 L 200 300 z"
        fill="orange" stroke="black" stroke-width="3" />
</g>
</svg>

Upvotes: 1

nicholaswmin
nicholaswmin

Reputation: 22989

You need to use .setAttribute instead of .style for SVG elements.

Although they both are DOM nodes, SVG elements use inline attributes for these operations.

Apart from that you also need to translate your item to counteract the positional change when scaling is applied

document.querySelector('#group').addEventListener('click', function() {
  this.setAttribute('transform', 'scale(-1, 1) translate(-100, 0)')
})
<svg viewBox="0 0 195 150" xmlns="http://www.w3.org/2000/svg">
   <g id="group" stroke="green" fill="white" stroke-width="5">
     <circle cx="0" cy="25" r="15"/>
     <circle cx="20" cy="25" r="15"/>
     <circle cx="40" cy="25" r="15"/>
     <circle cx="60" cy="25" r="15"/>
     <circle cx="80" cy="25" r="15"/>
     <circle cx="100" cy="25" r="15"/>
   </g>
</svg>

Upvotes: 2

Related Questions