jQuery animate yếu tố SVG

Question

Tôi có một svg trong ứng dụng của mình. Giống như

<svg id="gt" height="450" width="300" xmlns="http://www.w3.org/2000/svg"> 
<image id="1_dice" x="0" y="420" height="30" width="30" xlink:href="images/1_coin.png" /> 
</svg> 

Tôi có phần tử svg có tên '1_dice'. Trong một nút bấm HTML, tôi muốn tạo hiệu ứng cho phần tử theo các tham số. Giống như

$('#btn').click(function(){ 
    $('#1_dice').animate({'x':200},2000); 
}); 

tôi đã cố gắng này, nhưng điều này không làm việc ...

Answer 1

jQuery animate là cho hiệu ứng động các phần tử HTML. Đối với SVG, bạn phải dùng thử plugin jQuery SVG. Vui lòng theo liên kết - http://keith-wood.name/svg.html

Answer 2

Có thể không có plugin, nhưng nó liên quan đến một mẹo. Vấn đề là x không phải là thuộc tính css mà là thuộc tính và chỉ jQuery.animate các thuộc tính css hoạt hình. Nhưng bạn có thể sử dụng tham số step để chỉ định hành vi tùy chỉnh của riêng bạn cho hoạt ảnh.

foo là thuộc tính không tồn tại có giá trị hoạt ảnh mà chúng tôi sử dụng trong chức năng bước.

$('#btn').click(function(){ 
    $('#dice_1').animate(
     {'foo':200}, 
     { 
      step: function(foo){ 
       $(this).attr('x', foo); 
      }, 
      duration: 2000 
     } 
    ); 
});