SVG 匹配来自两个不同路径的stroke-dashoffset

Question

我有两条不同的路径，我在其中为 stroke-dashoffset 设置动画，这会产生绘图效果。 有两个按钮可以增加/减少笔划-dashoffset。

我想要实现的是通过匹配在整个进程中垂直对齐的填充路径。 这甚至可能吗？

目前在演示中，两条路径的笔划-破折号不匹配，因为锯齿状路径的长度更大。

我希望避免涉及将主路径放在其他两个顶部的解决方案，因为它会摆脱锯齿线上的“绘图” animation 外观并且两条路径都有圆形末端。

 const btnAdd = document.querySelector(".btn-add"); const btnSub = document.querySelector(".btn-sub"); const line = document.querySelector(".line"); const jaggedLine = document.querySelector(".jagged-line"); const lineLength = line.getTotalLength(); const jaggedLineLength = jaggedLine.getTotalLength(); line.setAttribute("stroke-dasharray", lineLength); jaggedLine.setAttribute("stroke-dasharray", jaggedLineLength); line.setAttribute("stroke-dashoffset", lineLength); jaggedLine.setAttribute("stroke-dashoffset", jaggedLineLength); let progress = 0; const updateSVG = () => { line.setAttribute("stroke-dashoffset", lineLength - progress); jaggedLine.setAttribute("stroke-dashoffset", jaggedLineLength - progress); }; btnAdd.addEventListener("click", () => { progress++; updateSVG(); }); btnSub.addEventListener("click", () => { progress--; updateSVG(); });

 .svg { margin-top: 50px; }

 <button class="btn-add">+</button> <button class="btn-sub">-</button> <div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.76 45.715" height="172.781" width="278.7779"> <g fill="none" stroke="#00aad4" stroke-linecap="round"> <path d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946" opacity=".165" stroke-width=".965" stroke-linejoin="round" /> <path d="M.8825.8825h71.995" opacity=".1648" stroke-width=".965" /> <path class="jagged-line" d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946" stroke-width="1.765" stroke-linejoin="round" /> <path class="line" d="M.8825.8825h71.995" stroke-width="1.765" /> </g> </svg> </div>

Answer 1

有一个 SVG 属性pathLength允许我们设置路径长度。

pathLength 属性允许作者以用户单位指定路径的总长度。 然后，通过使用比率 pathLength/（路径长度的计算值）缩放所有距离计算，该值用于校准浏览器的距离计算与作者的距离计算。

这会影响路径的实际渲染长度； 包括文本路径、animation路径，以及各种笔画操作。 基本上，所有需要路径长度的计算。 例如，stroke-dasharray 将假定路径的起点为 0，终点为 pathLength 属性中定义的值。

MDN

如果我们将相同的pathLength设置为 animation 变得简单。

 .svg { display: inline-block; margin: 1em; }.line, .jagged-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: dash 5s linear alternate infinite; } @keyframes dash { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

 <div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.76 45.715" height="172.781" width="278.7779"> <g fill="none" stroke="#00aad4" stroke-linecap="round"> <path d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946" opacity=".165" stroke-width=".965" stroke-linejoin="round" /> <path d="M.8825.8825h71.995" opacity=".1648" stroke-width=".965" /> <path class="jagged-line" d="M.8825 28.1368h7.6506l2.6171-10.6905 6.865 25.6202 3.1614-36.3492 3.9609 28.4864 1.1125-6.9395h8.7471l1.2762-7.3971 4.4477 23.966 2.3077-38.0867 1.6134 15.1554h7.5l3.3783 16.805 1.6625-13.5108h15.6946" stroke-width="1.765" stroke-linejoin="round" pathLength="100"/> <path class="line" d="M.8825.8825h71.995" stroke-width="1.765" pathLength="100"/> </g> </svg> </div>