我有這個 SVG
<svg width="455" height="102" viewBox="0 0 455 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="white" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20 10 20 10 20"/>
<path d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#222222" stroke-opacity="0.3" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20 10 20 10 20"/>
</svg>我的目標是根據某些應用程式狀態為每個方塊設定藍色影片，這個想法是它是一個加載器，一旦資料進入它就會完成所有藍色。所以最終結果將如下所示
<svg width="455" height="102" viewBox="0 0 455 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#007CFF" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20 10 20 10 20"/>
</svg>欣賞任何提示以及如何去做
uj5u.com熱心網友回復：
使用 SVG 蒙版影片。
底層是藍色曲線
頂層 - 灰色曲線
當蒙版從左到右設定影片時，上方的灰色曲線被切開，下方的藍色曲線因此變得可見。
<animate attributename="x" begin="svg1.click" dur="4s" values="-452;0" repeatCount="indefinite" />
用藍色填充曲線灰色會產生錯覺。
點擊后影片會開始
<svg id="svg1" width="455" height="102" viewBox="0 0 455 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="msk">
<rect width="100%" height="100%" fill="white" />
<rect fill="black" x="-452" y="0" width="450" height="100" >
<animate id="an" attributeName="x" begin="svg1.click;an.end 0.5s" dur="7s" values="-452;10" repeatCount="1" fill="freeze" />
</rect>
</mask>
</defs>
<path id="path" d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#007CFF" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20"/>
<path mask="url(#msk)" d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#BCBCBC" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20"/>
</svg>更新
正如@Dmitriy 評論的那樣
例如——資料在 4 秒內而不是 7 秒內出現——一旦發生這種情況，我可以立即完成影片嗎？
為此，您可以使用repeatDur這個屬性在影片開始一定時間后停止播放影片！簡單地說，repeatDur 限制了影片的持續時間。
顯示代碼片段
<svg id="svg1" width="455" height="102" viewBox="0 0 455 102" fill="none" xmlns="http://www.w3.org/2000/svg" style="border:1px solid">
<defs>
<mask id="msk">
<rect width="100%" height="100%" fill="white" />
<rect fill="black" x="-452" y="0" width="450" height="100" >
<animate id="an" attributeName="x" begin="svg1.click" dur="7s" repeatDur="4s" values="-452;10" repeatCount="1" fill="freeze" />
</rect>
</mask>
</defs>
<path id="path" d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#007CFF" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20"/>
<path mask="url(#msk)" d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#BCBCBC" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20"/>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/438392.html
上一篇：Swiftui串列影片
下一篇：水平文本滾動的平滑影片回圈