控制 SVG 动画起点答案

【问题标题】：Control SVG animation start point控制 SVG 动画起点
【发布时间】：2017-08-03 19:50:22
【问题描述】：

我有一个<rect> 的 SVG 动画，它从左上角开始。

如何从左下角开始动画？

svg {
  width: 50%;
  height: 50%;
}

rect {
  fill: transparent;
  stroke: #1c7fbf;
  animation: 5s draw linear forwards;
}

@keyframes draw {
  0% {
    stroke-dasharray: 260 260;
    stroke-dashoffset: -260;
    stroke-width: 2px;
  }
  100% {
    stroke-dasharray: 260 260;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

<svg viewBox='0 0 90 40'>
  <rect width='90' height='40' />
</svg>

【问题讨论】：

标签： javascript html css svg css-animations

【解决方案1】：

我不认为有办法改变起点，从那里绘制<rect>-元素。

但是，如果您使用<path> 和line commands 自己创建矩形，并通过反转stroke-dashoffset 的起始值，您可以从左下角或您喜欢的任何其他角落开始：

path {
  fill: transparent;
  stroke: blue;
  stroke-width: 2;
  stroke-dasharray: 260 260;
  animation: 5s draw linear forwards;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 260;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<svg viewBox='0 0 90 40'>
  <path d="M0 40 H 90 V 0 H 0 V 40"/>
</svg>

jsFiddle 演示

Try before buy

【讨论】：

【解决方案2】：

翻转和重新定位<rect> 作品：

transform: scaleY(-1) translateY(-100%);

还需要反转css动画：

  0% {
    stroke-dasharray: 260 260;
    stroke-dashoffset: 260; // instead of -260
    stroke-width: 2px;
  }

svg {
  width: 50%;
  height: 50%;
}

rect {
  fill: transparent;
  stroke: #1c7fbf;
  animation: 5s draw linear forwards;
  transform: scaleY(-1) translateY(-100%);
}

@keyframes draw {
  0% {
    stroke-dasharray: 260 260;
    stroke-dashoffset: 260;
    stroke-width: 2px;
  }
  100% {
    stroke-dasharray: 260 260;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

<svg viewBox='0 0 90 40'>
  <rect width='90' height='40' />
</svg>

【讨论】：