用 CSS3 SVG 动画向上画一条垂直线答案

【问题标题】：Draw a vertical line upward with CSS3 SVG animation用 CSS3 SVG 动画向上画一条垂直线
【发布时间】：2016-08-10 13:13:57
【问题描述】：

我是 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 关键帧动画的例子。提前致谢。

【问题讨论】：

减少 y1 或 y2。

标签： css svg svg-animate

【解决方案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 （渐变只是为了让它漂亮）

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：