CODEWITHSUNDEEP
javascriptcsssvg
Dustin
Dustin

Reputation: 6307

CSS3 - Move SVG Circle

I have a SVG Circle that I'd like to have the ability to move around using CSS3 animations. Essentially at the moment the circle is moved off to the right, and would like to animate move it to the left. How would I go about it? Thanks.

<svg version="1.1" id="ls_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="82 165.3 449.1 461.3" xml:space="preserve">
<circle id="leftCircle" class="circles" cx="86.3" cy="396.3" r="4.3"/>
</svg>

EDIT: Forgot examples. The javascript moves the SVG item successfully, but is instant instead of animating.

#leftCircle {
  -webkit-transition: width 5s ease-in-out;
  -moz-transition: width 5s ease-in-out;
  -o-transition: width 5s ease-in-out;
  -ms-transition: width 5s ease-in-out;
  transition: width 5s ease-in-out;
}

JS:

$('#leftCircle').attr('cx', '400')

Upvotes: 2

Views: 2654

Answers (1)

Shomz
Shomz

Reputation: 37701

You can do it combining animate() and step:

$('#leftCircle').animate(
  {'cx': '400'},
  {step:function(v1){$(this).attr("cx",v1)}}
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="ls_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="82 165.3 449.1 461.3" xml:space="preserve">
<circle id="leftCircle" class="circles" cx="86.3" cy="196.3" r="4.3"/>
</svg>

Upvotes: 2

Related Questions