动画 SVG 线条过渡

Question

给定两个简单的 SVG 图标，我如何为它们之间的过渡设置动画 - 理想情况下没有复杂的 JavaScript（例如 GreenSock；不过切换一个类就可以了）：

svg {
    width: 10em;
    border: 1px solid #AAA;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    fill: none;
}

<svg viewBox="0 0 24 24">
    <line x1="3" y1="6" x2="21" y2="6" />
    <line x1="3" y1="18" x2="21" y2="18" />
</svg>

<svg viewBox="0 0 24 24">
    <line x1="9" y1="6" x2="15" y2="12" />
    <line x1="9" y1="18" x2="15" y2="12" />
</svg>

（我假设两个图标<line>都会出于<svg>动画目的而合并为一个图标。）

根据我自己的研究，在网络上浏览了很多看似相互冲突的文档，CSS转换在这里是不够的（translate++导致图像倾斜）并且不再推荐SMIL（我也很难弄清楚如何使其工作）适当地）。scalerotate

Answer 1

这可能需要一些调整，但您可以使 CSS 过渡与该transform属性一起使用。关键是平移、旋转和缩放的应用顺序。

var toggle = true;

document.addEventListener('click', function() {
  document.querySelector('svg').classList[toggle ? 'add' : 'remove']('arrow');
  toggle = !toggle;
});

svg {
  width: 10em;
  border: 1px solid #aaa;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  fill: none;
  cursor: pointer;
}

svg line {
  transition: transform 250ms ease-in;
}

.arrow .line-top {
  transform: translate(12px, 0px) rotate(45deg) scale(0.5, 1);
}

.arrow .line-bottom {
  transform: translate(-5px, 5.3px) rotate(-45deg) scale(0.5, 1);
}

click to toggle arrow class <br>
<svg viewBox="0 0 24 24">
    <line class="line-top" x1="3" y1="6" x2="21" y2="6" />
    <line class="line-bottom" x1="3" y1="18" x2="21" y2="18" />
</svg>