Question

在我的index.html中，我有：

<ellipse id="ellipseRed" cx="500" cy="1300" rx="40" ry="150" />

在我的javascript文件中，我有：

$('ellipse').click(function() {
  $(this).attr('transform', 'translate(0 -350) rotate(0)');
});

转换有效，但不顺利。这似乎是“跳”到新的位置，而不是过渡到它。

我想点击SVG椭圆，让它慢慢向上垂直移动。然后，如果我再次点击它，让它慢慢向下移动。

我是新的html，SVG和jQuery / Javascript

我是否以正确的方式解决这个问题？我应该使用jQuery来动画这个SVG吗？

Answer 1

虽然使用jQuery动画SVG当然是可能的，但它很笨拙而且效率不高。我建议使用具有良好SVG支持的库，例如Raphael或D3。

这是你在jQuery中的方法：

//jQuery way, not recommended
$('#ellipseRed').click(function() {
    //min-height is just a placeholder value
    //so jquery knows what values to put into
    //the transformation
    $(this)
    .css({"min-height": 0})
    .animate(
      {"min-height": -350},
      {duration: 1000,
       step: function( top ){
           this.setAttribute("transform", "translate(0,"+top+")");
         }
       });
});

比较这在D3中的清晰程度：

d3.select("#ellipseBlue").on("click", function(){
  d3.select(this)
      .attr("transform", "translate(0,0)")
      .transition()
        .duration(1000)
        .ease("in-out")
        .attr("transform", "translate(0,-350)")
});

您可以在此处找到演示：http://jsfiddle.net/LupTw/

Answer 2

对于动画，您必须使用翻译。您可以在此处查看示例http://www.the-art-of-web.com/css/css-animation/#4

使用jQuery垂直平滑变换SVG

2 个答案: