Scale animation on polygon

Question

I have a <polygon> that i want to do an scale effect on mouseover, returning to the original size on mouse out, and with a smooth animation, any idea of how can i do that? Y tried with jQuery, changing the class of the <polygon> but nothing works

The last thing i tried was this:

<div style="width:500px; background-color:#FFDB89">
<svg height="210" width="500">
<polygon id="idtriangle" class="triangle" points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
</div>
</body>
<script>
$( ".triangle" ).mouseover(function() {
$( "#idtriangle" ).animate({
MozTransform: 'scale(1.1,1.1)',
transform: 'scale(1.1,1.1)'
});
});
</script>

Thanks

Answer 1

You don't need to use JQuery. A CSS transition will do fine. To keep things simple, use a <g> element with a transform attribute to move the coordinate origin to the middle of the object you want to scale. That way it will stay in the same place instead of sliding away from the top left corner.

#idtriangle { transform:scale(1.0); transition:transform 0.5s;}
#idtriangle:hover { transform:scale(1.1); }

<div style="width:500px; background-color:#FFDB89">
  <svg height="210" width="500" viewBox="0 0 500 210">
    <g transform="translate(250,105)">
      <polygon id="idtriangle" class="triangle"
               points="-50,-95 0,85 -90,105"
               style="fill:lime;stroke:purple;stroke-width:1"/>
    </g>
  </svg>
</div>