Анимационное свойство очень свободно документируется. И к сожалению для меня, путь документы W3, SVG является ОЧЕНЬ трудным, понимают и перекрестная ссылка.
Я ДОБРАЛСЯ, ЭТО ДЛЯ РАБОТЫ (... шаг вперед, по крайней мере)... должно было знать для преобразования секунд в миллисекунды (удары, лоб)
Я обновил код для отражения, моя следующая стартовая площадка (столкнулся с другой проблемой). Когда у меня есть две анимации строк, другой исчезает, когда следующий запускается, как я делаю его так, каждая строка остается, после того как это было анимировано?... Я предполагаю, что это имеет некоторое отношение к свойству 'заливки', но '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>
ОБНОВЛЕНИЕ: Я недавно заставил это работать, вот решение
Добавьте, что заливка приписывает Вашему анимационному элементу со значением замораживания. Как так
<animate attributeName="y2" attributeType="XML" ... fill="freeze" />
Вот некоторые эффекты, которых я достиг: Совместимые браузеры SVGAnimate Только!!! [Opera, Safari, Chrome], не извините никакой Firefox или IE... справедливое предупреждение, это налоги ЦП немного.
Это работает (проверено в 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>
Я вижу две основные проблемы в вашем коде: