我有以下 SVG
<?xml version="1.0" encoding="UTF-8"?>
<svg style="transform: rotate(90deg)" width="190px" height="200px" viewBox="0 0 190 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>9C2F36FF-8DCA-4802-94A6-CB492649C17A</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="56.8668386%" id="linearGradient-1">
<stop stop-color="#EB6150" offset="0%"></stop>
<stop stop-color="#D55848" offset="100%"></stop>
</linearGradient>
</defs>
<g style="position: absolute; z-index: 3" id="Startup-Responsive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Desktop-1440" transform="translate(-1235.000000, -2807.000000)" stroke="url(#linearGradient-1)" stroke-width="16">
<g id="Experienced" transform="translate(116.000000, 2812.000000)">
<path class="draw1" d="M1115.20958,68.2095765 L1121.83952,74.839525 L1127.47671,80.476715 C1133.7251,86.7251037 1143.85574,86.7251037 1150.10413,80.476715 L1191.47671,39.104132 C1197.7251,32.8557433 1197.7251,22.7251037 1191.47671,16.476715 C1188.47613,13.4761329 1184.40647,11.7904235 1180.16301,11.7904235 L1138.79042,11.7904235 L1138.79042,11.7904235" id="Fore-Copy-2" transform="translate(1167.000000, 51.790423) scale(-1, -1) rotate(90.000000) translate(-1167.000000, -51.790423) "></path>
</g>
</g>
</g>
<g style="position: absolute; z-index: -1" id="Startup-Responsive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Desktop-1440" transform="translate(-1235.000000, -2807.000000)" stroke="url(#linearGradient-1)" stroke-width="16">
<g id="Experienced" transform="translate(116.000000, 2812.000000)">
<polyline class="draw2" id="Back-Copy" transform="translate(1155.209577, 131.790423) scale(-1, -1) rotate(90.000000) translate(-1155.209577, -131.790423) " points="1127 103.580847 1167.01603 143.596878 1183.41915 160"></polyline>
</g>
</g>
</g>
</svg>
我已將影片添加到描邊路徑，如下所示
.arrow-bottom
margin-top: -50px
.draw1
animation: animate 1s linear infinite
stroke-dasharray: 100
stroke-dashoffset: 100
.draw2
animation: animate 1.5s linear 0.9s infinite
stroke-dasharray: 190
stroke-dashoffset: 190
@keyframes animate
to
stroke-dashoffset: 0
影片作品。但是當它開始回圈時，我可以分別看到兩個 SVG，沒有流量。此外，我希望 id=Back-Copy SVG 元素（第二個）隱藏在這樣的 div 后面 在這里 輸入影像描述任何人都可以建議這樣做的方法嗎？
uj5u.com熱心網友回復：
運行此代碼片段，讓我知道這是否是您想要實作的目標。
- 我
stroke-dashoffset為兩者.draw1和.draw2 - 影片延遲僅適用于初始影片與影片的每個周期，因此我創建了一個新的關鍵幀并為每個影片周期添加了延遲。結束
animate1時animate2開始。
.arrow-bottom {
margin-top: 50px;
}
.arrow-bottom .draw1,
.arrow-bottom .draw2 {
stroke-dasharray: 200 200;
stroke-dashoffset: 200;
}
.arrow-bottom .draw1 {
animation: animate1 2s linear 0s forwards infinite;
}
.arrow-bottom .draw2 {
animation: animate2 2s linear 0s forwards infinite;
}
@keyframes animate1 {
from, 20% {
stroke-dashoffset: 200;
}
to {
stroke-dashoffset: 10;
}
}
@keyframes animate2 {
from {
stroke-dashoffset: 200;
}
49%, to {
stroke-dashoffset: 10;
}
}<?xml version="1.0" encoding="UTF-8"?>
<svg class="arrow-bottom" style="transform: rotate(90deg)" width="190px" height="200px" viewBox="0 0 190 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>9C2F36FF-8DCA-4802-94A6-CB492649C17A</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="56.8668386%" id="linearGradient-1">
<stop stop-color="#EB6150" offset="0%"></stop>
<stop stop-color="#D55848" offset="100%"></stop>
</linearGradient>
</defs>
<g style="position: absolute; z-index: 3" id="Startup-Responsive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Desktop-1440" transform="translate(-1235.000000, -2807.000000)" stroke="url(#linearGradient-1)" stroke-width="16">
<g id="Experienced" transform="translate(116.000000, 2812.000000)">
<path class="draw1" d="M1115.20958,68.2095765 L1121.83952,74.839525 L1127.47671,80.476715 C1133.7251,86.7251037 1143.85574,86.7251037 1150.10413,80.476715 L1191.47671,39.104132 C1197.7251,32.8557433 1197.7251,22.7251037 1191.47671,16.476715 C1188.47613,13.4761329 1184.40647,11.7904235 1180.16301,11.7904235 L1138.79042,11.7904235 L1138.79042,11.7904235" id="Fore-Copy-2" transform="translate(1167.000000, 51.790423) scale(-1, -1) rotate(90.000000) translate(-1167.000000, -51.790423) "></path>
</g>
</g>
</g>
<g style="position: absolute; z-index: -1" id="Startup-Responsive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Desktop-1440" transform="translate(-1235.000000, -2807.000000)" stroke="url(#linearGradient-1)" stroke-width="16">
<g id="Experienced" transform="translate(116.000000, 2812.000000)">
<polyline class="draw2" id="Back-Copy" transform="translate(1155.209577, 131.790423) scale(-1, -1) rotate(90.000000) translate(-1155.209577, -131.790423) " points="1127 103.580847 1167.01603 143.596878 1183.41915 160"></polyline>
</g>
</g>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312405.html