css - 如何使线性 css 过渡到 SVG 路径？

Question

我正在创建一个类似路径 SVG 的吉他弦，我正在尝试在上述路径上整合类(class)。所以它有点像道路路径的东西，其中几乎没有阶段或模块。

我想要实现的是在路径上添加线性动画，只要当前 步是 活跃 .通过线性动画，我的意思是它有点像在 svg 上绘制，但唯一的区别是它填充了路径本身。我找不到任何资源如何做到这一点，而且大多数结果都在 上。抽奖 动画片。

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

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

Answer 1

正如 Paulie_D 在评论中所说，关键是为 SVG stroke-dash-offset 设置动画。 .这是有关其工作原理的更多详细信息。

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

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

现在您可以在 CSS 中为描边属性设置动画。这包括 stroke-width , stroke (颜色)，stroke-width ， ETC。

.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你可以如何使用不同的颜色和步骤到每个部分。