Question

我有<polygon>我希望对鼠标悬停做一个缩放效果，在鼠标输出时返回原始大小，并且使用流畅的动画，我怎么能这样做呢？ Y尝试使用jQuery，改变<polygon>的类，但没有任何作用

我尝试的最后一件事是：

<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转换会很好。为简单起见，请使用带变换属性的<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>

在多边形

1 个答案: