在多边形上缩放动画

Question

我有一个 <polygon>，我想在鼠标悬停时产生缩放效果，在鼠标移出时返回到原始大小，并使用流畅的动画，知道我该怎么做吗？ Y 尝试使用 jQuery，更改 <polygon> 的 class 但没有任何效果

我最后尝试的是这个：

<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>

谢谢

Answer 1

您不需要使用 JQuery。 CSS 过渡就可以了。为简单起见，使用带有 transform 属性的 <g> 元素将坐标原点移动到要缩放的对象的中间。这样它就会留在同一个地方而不是从左上角滑开。

#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>

在多边形上缩放动画

Scale animation on polygon

jquery

svg

polygon