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