Question

我是SVG动画的新手。如何使用CSS3 SVG动画生成垂直线？该线应从底部开始并向上增长到自定义高度（例如0到100）。我有以下代码：

<svg height="210" width="10">
    <line x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:3" />
</svg>

这是初始职位。我已经尝试增加y2值，但随后它会向下增长，这是我不想要的。请给我看一个CSS3关键帧动画的例子。提前谢谢。

Answer 1

通常为绘制曲线的过程设置动画，其中一个动画为stroke-dashoffset设置动画。这是一个相当简单的例子：

<path fill="url(#rg)" transform="translate(7,5) scale(.62)" stroke="url(#rg)" stroke-opacity=".6" stroke-width="15" stroke-dasharray="45 45" fill-rule="evenodd" 
      d="M64,33 c27 -16,89,0,68,22 C103,84,41,39,13,67 c-24,24,20,49,42,43 C103,97,78,0,36,1 C10,1.5 -3,28,2,52 c3,12,10,22,21,27 c8,3,21,5,29,2 c16-4,8-26,16 -36 c7-10,26-7,34.73 0 c21,16,11,64-1,83 c-6,9-20,17-31,13 c-14 -5-12-24-14-36 C52,82,39,47,64,33z">
    <animate attributeName="stroke-dashoffset" values="0;900;1800" dur="45s" repeatCount="indefinite"/>
</path>

（对于一条线也是一样的 - 只是路径的一个简单例子 - 只要确保这些值足够大以覆盖整条线。工作示例：http://cs.sru.edu/%7Eddailey/tangles/drawingcurve.svg （渐变只是为了使它漂亮）

Answer 2

您不能使用CSS动画，因为目前SVG几何属性不能用CSS修改。只有样式属性。

SVG的原点位于左上角，而不是您可能期望的左下角。因此，如果你想绘制一条从底部开始向上增长的线，你需要从一个高Y坐标值开始，然后减少它。

这是一个有两行的SVG示例。绿色的一个是另一个的高度的一半，两者都从相同的底部坐标开始。

＆＃13;

<svg height="210" width="10">
    <line x1="2" y1="0" x2="2" y2="210" style="stroke:rgb(255,0,0);stroke-width:3" />
    <line x1="8" y1="100" x2="8" y2="210" style="stroke:rgb(0,128,0);stroke-width:3" />
</svg>

＆＃13;

使用CSS3 SVG动画向上绘制一条垂直线

2 个答案: