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坐标（当然......呃！）

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

如何使用stroke-dasharray为SVG线设置动画，使其从右向左移动

1 个答案: