CODEWITHSUNDEEP
javascripthtmlcsssvg
mattstuehler
mattstuehler

Reputation: 9282

Using CSS transitions to animate the position of SVG elements

I'd like to use CSS transitions to animate the position of SVG elements.

However - it looks like this works on some SVG elements (e.g., rect), but not on others (e.g. text):

document.querySelector("button").onclick = function() {
  var x = Math.random() * 450;
  document.querySelector("rect").setAttributeNS(null, "x", x);
  document.querySelector("text").setAttributeNS(null, "x", x);
}
rect {
  transition: all 700ms ease-in-out;
}

text {
  transition: all 700ms ease-in-out;
}
<svg width="500" height="100">
  <rect x="100" y="10" width="30" height="30" fill="blue" stroke="none"/>
  <text x="100" y="80" fill="red" stroke="none">Hello</text>
</svg>
<br>
<button>animate</button>

Am I doing something wrong? Is there a better way to do this? (ideally, without using JavaScript or a library like GreenSock).

Upvotes: 3

Views: 7736

Answers (3)

Paul LeBeau
Paul LeBeau

Reputation: 101800

The correct solution is to use transform, as Temani said.

However, in my actual application - the SVG elements are moving under a mask, and the transform seems to cause unintended side-effects.

That is because the transform on an element also applies to the other attributes that are applied to it. Such as a mask. The fix is to move the mask to a parent group so that it is unaffected by the transform

<g mask="url(#mask1)">
  <rect id="rect2" x="0" y="60" width="20" height="20" fill="blue" stroke="none"/>
  <text id="text2" x="0" y="100" fill="red" stroke="none">Hello</text>
</g>

Full example:

document.querySelector("button").onclick = function() {
  var x = Math.random() * 450;
/*   document.querySelector("rect").setAttributeNS(null, "x", x);
  document.querySelector("text").setAttributeNS(null, "x", x);
   */	
  document.getElementById("rect1").setAttributeNS(null, "x",x);
  document.getElementById("text1").setAttributeNS(null, "x",x);

  document.getElementById("rect2").setAttributeNS(null, "transform","translate("+x+")");
  document.getElementById("text2").setAttributeNS(null, "transform","translate("+x+")");

}
rect {
  transition: all 700ms ease-in-out;
}

text {
  transition: all 700ms ease-in-out;
}
svg {
	border: 1px solid purple;
}
<svg width="500" height="200">
  <defs>
    <mask id="mask1" x="0" y="0" width="500" height="200">
      <rect x="0" y="0" width="200" height="200" fill="#ffffff" stroke="none"/>
    </mask>
  </defs>
  <rect id="rect1" x="0" y="10" width="20" height="20" fill="blue" stroke="none" mask="url(#mask1)"/>
  <text id="text1" x="0" y="50" fill="red" stroke="none" mask="url(#mask1)">Hello</text>
  <g mask="url(#mask1)">
    <rect id="rect2" x="0" y="60" width="20" height="20" fill="blue" stroke="none"/>
    <text id="text2" x="0" y="100" fill="red" stroke="none">Hello</text>
  </g>
  <rect x="0" y="0" width="200" height="200" fill="none" stroke="lime" stroke-width="2"/>
</svg>
<br>
<button>animate</button>
<p>
The green outline shows the position of the mask rect
</p>

Upvotes: 3

Shailendra Gupta
Shailendra Gupta

Reputation: 1118

you can also achive this by jquery

$('button').on('click',function(){
    var x = Math.random() * 250;
    $('rect').attr("transform","translate("+x+")");
    $('text').attr("transform","translate("+x+")");
});
rect {
  transition: all 700ms ease-in-out;
}

text {
  transition: all 700ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="100">
  <rect x="100" y="10" width="30" height="30" fill="blue" stroke="none"/>
  <text x="100" y="80" fill="red" stroke="none">Hello</text>
</svg>
<br>
<button>animate</button>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

You can use translation instead:

document.querySelector("button").onclick = function() {
  var x = Math.random() * 250;
  document.querySelector("rect").setAttributeNS(null, "transform","translate("+x+")");
  document.querySelector("text").setAttributeNS(null, "transform","translate("+x+")");
}
rect {
  transition: all 700ms ease-in-out;
}

text {
  transition: all 700ms ease-in-out;
}
<svg width="500" height="100">
  <rect x="100" y="10" width="30" height="30" fill="blue" stroke="none"/>
  <text x="100" y="80" fill="red" stroke="none">Hello</text>
</svg>
<br>
<button>animate</button>

Upvotes: 7

Related Questions