SVG, animate một dòng từ x1, y1 đến x2, y2?

Question

Thuộc tính animate được ghi lại rất lỏng lẻo. Và thật không may cho tôi, cách các tài liệu W3 SVG là VERY khó hiểu và tham khảo chéo.

tôi đã nhận được nó để làm việc (... một bước tiến ít nhất) ... nên đã biết để chuyển đổi giây để mili giây (tát, trán)

Tôi đã cập nhật mã để phản ánh đá bước tiếp theo của tôi (chạy vào một vấn đề khác). Khi tôi có hai dòng hoạt hình, cái kia biến mất khi cái tiếp theo bắt đầu, làm thế nào để tôi làm cho nó như vậy mọi dòng vẫn ở một khi nó đã được làm động? ... Tôi cho rằng nó có liên quan đến thuộc tính 'lấp đầy', nhưng 'fill = freeze' biến đổi dòng thành dọc.

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
     "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg width="1020" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:rgb(255,255,255)" > 
<g style="stroke:black" > 
<line x1="242.25" y1="216" x2="242.25" y2="216" style="stroke:rgb(0,0,0);stroke-width:1;" > 
<animate attributeName="x2" attributeType="XML" from="242.25" to="219.9375" begin="0ms" dur="117ms" /> 
<animate attributeName="y2" attributeType="XML" from="216" to="170.999808" begin="0ms" dur="117ms" /> 
</line> 
<line x1="219.9375" y1="170.999808" x2="219.9375" y2="170.999808" style="stroke:rgb(0,0,0);stroke-width:1;" > 
<animate attributeName="x2" attributeType="XML" from="219.9375" to="207.1875" begin="117ms" dur="83ms" /> 
<animate attributeName="y2" attributeType="XML" from="170.999808" to="153.149952" begin="117ms" dur="83ms" /> 
</line> 
</g> 
</svg> 

UPDATE: Gần đây tôi đã nhận nó để làm việc, đây là giải pháp

Thêm một điền thuộc tính để yếu tố Animate của bạn với giá trị của đóng băng. Giống như vậy

<animate attributeName="y2" attributeType="XML" ... fill="freeze" /> 

Dưới đây là một số hiệu ứng tôi đạt được: Chỉ các trình duyệt tương thích SVGA! [Opera, Safari, Chrome], xin lỗi không có firefox hay IE ... cảnh báo công bằng, nó sẽ đánh thuế CPU một chút.

Answer 1

này làm việc (thử nghiệm trong Opera):

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg width="480" height="320" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g style="stroke:black" > 
     <line x1="0" y1="0" x2="50" y2="50" style="stroke:rgb(0,0,0);stroke-width:20;" > 
      <animate attributeName="x2" from="50" to="100" begin="1s" dur="2s" /> 
      <animate attributeName="y2" from="50" to="100" begin="1s" dur="2s" /> 
     </line> 
    </g> 
</svg> 

tôi thấy hai vấn đề lớn trong mã của bạn:

• Dòng nằm ngoài hình ảnh (width: 480, x1: 585)
• Giá trị thời gian ít người biết đến (bạn đang sử dụng hàng trăm giây ở đó !!!)

Answer 2

Tôi không chắc chắn đây là những gì bạn đang tìm kiếm, nhưng bạn có thể muốn xem Lazy Line Painter jQuery plugin.

Lazy Line Painter là một plugin jQuery cho phép bạn thực hiện hoạt ảnh đường dẫn SVG. Nó hoạt động bằng cách chuyển đổi đồ họa dòng SVG của bạn thành mã JavaScript, sau đó bạn nhập jQuery, Raphaël và plugin Lazy Line Painter jQuery và đã hoàn thành.

Plugin Lazy Line Painter cho phép bạn thực hiện hoạt ảnh đường dẫn. Điều này có nghĩa là nếu bạn có một hình ảnh, chỉ bao gồm các dòng (với đầu bắt đầu là &, không có lấp đầy), thì plugin này sẽ cho phép bạn thực hiện hoạt ảnh sẽ theo dõi đường kẻ để vẽ hình ảnh - như một hoạt hình.