我有两条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; }
}

最佳答案

我刚刚意识到答案就回答我自己的问题!!

在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>

10-05 20:33
查看更多