如何使用筆觸-dasharray為SVG線設置動畫，以使其從右向左移動

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

我剛剛意識到答案就回答我自己的問題！！

在HTML中交換x1和x2坐標（當然..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>