css - 如何将线性CSS转换为SVG路径？

Question

我正在创建一个像路径 SVG 一样的吉他弦，并且我正在尝试整合该路径上的类(class)。所以它有点像一条道路，其中只有很少的阶段或模块。

我想要实现的是，只要当前步骤处于事件状态，就在路径上添加线性动画。我所说的线性动画有点像在 svg 上绘制，但唯一的区别是它填充了路径本身。我找不到任何资源如何做到这一点，而且大多数结果都更多关于绘制动画。

目前我使用 transition:.5s all Easy; 来制作简单的动画，但我希望线性动画让它更酷。

这是我的 svg 笔 https://codepen.io/leonardpbdigital/pen/eYpvNVL我为本演示添加了一个简单的脚本。

Answer 1

正如 Paulie_D 在评论中所说，关键是对 SVG lines-dash-offset 进行动画处理。以下是有关其工作原理的更多详细信息。

基本上，它在线上创建一个虚线笔划(使用开放路径使这项工作效果最好)，其中每个“破折号”是线长度的 100%，并且破折号之间的每个空间大小相同。然后，它将第一个“破折号”从路径末端移开以填充路径。

这里的关键是 CSS 中的路径定义必须将 pathlength 设置为 1(与 100% 相同)。

现在您可以在 CSS 中为笔划属性设置动画。这包括笔画宽度、笔画(颜色)、笔画宽度等。

.container {
	margin: 30px;
}

#path {
	stroke: #dadada;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	fill: none;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-linejoin: round;
	animation: reveal 3s linear infinite;
}

@keyframes reveal {
  from {
	stroke: #111111;
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
	stroke: skyblue;
  }
}

<div class="container">
	<svg width="553px" height="239px" viewBox="0 0 553 239" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g fill-rule="evenodd">
        <path id="path"
		pathLength="1"
		d="M10,11 L114.530616,11 C122.360858,11 126.275979,15.9504251 126.27598,25.8512759 C126.27598,35.7521268 126.27598,98.9884467 126.27598,215.560235 C126.27598,223.186745 129.049387,227 134.596203,227 C140.143019,227 190.952571,227 287.02486,227 C295.080229,227 299.107914,223.186745 299.107914,215.560235 C299.107914,207.933725 299.107914,190.752337 299.107914,164.016069 C299.461684,117.430837 317.3583,94.1382206 352.797762,94.1382206 C388.237223,94.1382206 439.637969,94.1382206 507,94.1382206"></path>
    </g>
	</svg>
</div>

但是，仅使用描边路径意味着您没有那么多的控制权。如果您将路径设为 SVG 蒙版，则会有更多机会。例如，您可以使用渐变背景为线条的“部分”着色。您甚至可以展示一张图片。这是an example如何使用不同的颜色并逐步进入每个部分。