动画 SVG 箭头和 z-index

Question

我有以下 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 元素（第 2 个）隐藏在 div 后面，像这样 enter image description here 任何人都可以建议这样做的方法吗？

Answer 1

运行这个代码片段，让我知道这是否是您想要实现的目标。

我为 .draw1 和 .draw2

stroke-dashoffset

动画延迟仅适用于初始动画与动画的每个循环，因此我创建了一个新的关键帧并为每个动画循环添加了延迟。 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>

动画 SVG 箭头和 z-index

Animated SVG arrow and z-index

css

animation

svg

z-index