将直线 SVG 路径动画化为曲线？答案

【问题标题】：Animating straight SVG path into curved?将直线 SVG 路径动画化为曲线？
【发布时间】：2017-04-10 15:14:03
【问题描述】：

我有两个 SVG，都由 3 行组成。

在第一个 SVG 中，线条是直的：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1000 521.8" style="enable-background:new 0 0 1000 521.8;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#000000;stroke-width:106;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0" d="M0,261.9h77c27.5,0,72.5,0,100,0h823"/>
	<path class="st1" d="M0,261.9h77c27.5,0,72.5,0,100,0h823"/>
</g>
<g>
	<path class="st0" d="M0,463.9h77c27.5,0,72.5,0,100,0h823"/>
	<path class="st1" d="M0,463.9h77c27.5,0,72.5,0,100,0h823"/>
</g>
<g>
	<path class="st1" d="M0,59.9h77c27.5,0,72.5,0,100,0h823"/>
</g>
</svg>

在第二个中，我有相同的三条线，但只是编织在一起：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1000 521.8" style="enable-background:new 0 0 1000 521.8;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#000000;stroke-width:106;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0" d="M0,261.9h77c27.5,0,71.7-5.9,98.3-13.1L825.7,72.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/>
	<path class="st1" d="M0,261.9h77c27.5,0,71.7-5.9,98.3-13.1L825.7,72.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/>
</g>
<g>
	<path class="st0" d="M0,463.9h77c27.5,0,71.7-5.9,98.3-13.1l650.5-175.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/>
	<path class="st1" d="M0,463.9h77c27.5,0,71.7-5.9,98.3-13.1l650.5-175.9c26.5-7.2,70.8-13.1,98.3-13.1h76"/>
</g>
<g>
	<path class="st1" d="M0,59.9h77c27.5,0,69.8,10.7,94,23.8l660,356.5c24.2,13.1,66.5,23.8,94,23.8h75"/>
</g>
</svg>

我想知道是否有某种过渡功能？或者它会如何工作

【问题讨论】：

这个问题你已经问了三遍了。为什么你一直删除这个问题并重新提问？

标签： animation svg path transition

【解决方案1】：

是的，这是可能的。网上有很多例子（和这个网站上）。搜索“svg 路径补间”或“svg 路径变形”。

要知道的重要规则是原始行和最后一行必须具有相同的路径命令集，并且顺序相同。目前你的原始线有“Mhch”，但你的编织线是“MhcLch”。

Original: M 0,261.9
          h 77
          c 27.5,0,72.5,0,100,0
          h 823

Final:    M 0,261.9
          h 77
          c 27.5,0,71.7-5.9,98.3-13.1
          L 825.7,72.9
          c 26.5-7.2,70.8-13.1,98.3-13.1
          h 76

为了使d 属性的动画起作用。您需要更改原始路径，使其也是“MhcLch”。

【讨论】：