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>