Как я могу анимировать линию SVG, используя штрих-dasharray, чтобы она перемещалась справа налево.

Question

У меня есть две линии SVG один поверх другого. Я сделал их оба живыми. См. Скрипту: http://jsfiddle.net/pgsLwvb0/1/

Верхняя строка работает так, как я хочу, но мне хотелось бы, чтобы нижняя строка переместилась справа налево. Что мне нужно изменить в моем коде, чтобы сделать эту работу? Это изменение CSS или изменение HTML?

Это код, который я использовал:

HTML

<svg height="5" width="150"> 
    <line id="top" x1="2" y1="3" x2="150" y2="3" /> 
</svg> 
<br> 
<br> 
<svg height="5" width="150"> 
    <line id="bottom" x1="2" y1="3" x2="150" y2="3" /> 
</svg> 

CSS

#top { 
    stroke: rgb(112,111,111); 
    stroke-width:1; 
    stroke-dasharray:150; 
    stroke-dashoffset:150; 
    -webkit-animation: dash-top 0.5s forwards; 
} 

#bottom { 
    stroke: rgb(112,111,111); 
    stroke-width:1; 
    stroke-dasharray:150; 
    stroke-dashoffset:150; 
    -webkit-animation: dash-bottom 0.5s forwards; 
} 

@-webkit-keyframes dash-top { 
    to { stroke-dashoffset: 0; } 
} 

@-webkit-keyframes dash-bottom { 
    to { stroke-dashoffset:0; } 
} 

Answer 1

Отвечая на мой собственный вопрос, я просто понял ответ !!

переставляем x1 и x2 координаты вокруг в HTML (от course..duh!)

<svg height="5" width="150"> 
<line id="top" x1="2" y1="3" x2="150" y2="3" /> 
</svg> 
<br> 
<br> 
<svg height="5" width="150"> 
<line id="bottom" x1="150" y1="3" x2="2" y2="3" /> 
</svg>