SVG, анимируйте строку от x1, y1 до x2, y2?

Question

Свойство animate очень слабо задокументировано. И, к сожалению для меня, способ, которым W3 документы SVG ОЧЕНЬ сложен для понимания и перекрестные ссылки.

Я ПОЛУЧИЛ ЭТО РАБОТАТЬ (... по крайней мере, шаг вперед) ... должен был знать, что нужно конвертировать секунды в миллисекунды (шлепки, лоб)

Я обновил код, чтобы отразить мою следующую ступеньку (столкнулся с другой проблемой). Когда у меня анимация двух строк, другая исчезает при запуске следующей, как мне сделать так, чтобы каждая строка оставалась после анимации? ... Я предполагаю, что это как-то связано со свойством fill, но метод fill = freeze преобразует линию в вертикальную.

<?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: Я недавно заставил его работать, вот решение

Добавьте атрибут fill к элементу animate со значением freeze . Вот так

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

Вот некоторые эффекты, которых я достиг: Только совместимые с SVGAnimate браузеры !!! [Opera, Safari, Chrome], извините, нет Firefox или IE ... честное предупреждение, это немного нагружает процессор.

Answer 1

Это работает (проверено в 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> 

Я вижу две основные проблемы в вашем коде:

• Линия находится вне изображения (ширина: 480, x1: 585)
• Неясные значения времени (там вы используете сотые доли секунды !!!)

Answer 2

Я не уверен, что это то, что вы ищете, но вы можете взглянуть на Lazy Line Painter jQuery плагин .

Lazy Line Painter - это плагин jQuery, который позволяет вам выполнять анимацию пути SVG. Он работает путем преобразования вашей SVG-графики в код JavaScript, затем вы импортируете jQuery, Raphaël и плагин LQazery Painter jQuery и вуаля - готово.

Плагин Lazy Line Painter позволяет выполнять анимацию пути. Это означает, что если у вас есть изображение, которое состоит только из линий (с началом и концом, без заливки), то этот плагин позволит вам выполнить анимацию, которая проследит линию, чтобы нарисовать картинку - как анимация.