SVG箭头错误同步动画

Question

为什么箭头不和直线一起开始？是不是不同步？我希望箭头和线一起离开。

.box{
  width:100%;
  padding:0px;
  background-color: black;
}
.squiggle {
  stroke-dasharray: 498.181;
  stroke-dashoffset: 498.181;
  animation: draw 10s linear infinite;
}

@keyframes draw {
  from {
    stroke-dashoffset: 498.181;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
  <div class="box">
 <svg xmlns="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 215 66" preserveAspectRatio="xMidYMid meet">
  <g id="layer1" transform="translate(-68.19229,10.180375)">
    <g id="g38" transform="matrix(0.26458333,0,0,0.26458333,54.727655,-107.07271)">
    
        <g>
            <path id="path22" class="squiggle"
                style="fill:none;
                stroke:orange;
                stroke-width:3px;
                stroke-linecap:butt;
                stroke-linejoin:miter;
                stroke-opacity:1"
                d="M 653.40952,459.58095 C 539.70759,242.15840999999995 379.43686,703.6978899999999 252.34286,526.62857"/>
  
            <use href="#path22"/>

            <path fill="red" d="M -9.5357143,-9.9107143 10,0 -10,10 -3.3928571,-0.17857143 Z">
                <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
                    <mpath href="#path22"/>
                </animateMotion>
            </path>
        </g>
          </g>  
  </g>
</svg>
  </div>
</body>
</html>

Answer 1

看看这个，这可能会有帮助：

#desc {
  max-width: 700px;
  margin-top: 100px;
  color: #b3b3b3;
  font-size: 11px;
  font-family: sans-serif;
}
#desc li {
  margin-bottom: 1em;
}
#desc p {
  padding: 20px 0 0 40px;
}



#doubled-separate {
  width: 110px;
}
#doubled-separate #over-path {
  fill: none;
  stroke-dasharray: 150;
  stroke-dashoffset: 0;
  animation: 10s reveal linear infinite forwards;
}
@keyframes reveal {
  50%, 100% {
    stroke-dashoffset: 150;
  }
}

#separate-marker {
  width: 88px;
  position: relative;
  top:-4px;
}
#separate-marker .just-line {
  fill: none;
  stroke-dashoffset: 0;
  animation: 10s reveal2 linear infinite forwards;
}
@keyframes reveal2 {
  100% {
    stroke-dashoffset: 150;
  }
}

#doubled-separate-marker {
  width: 110px;
}
#doubled-separate-marker .over-path {
  fill: none;
  stroke-dasharray: 150;
  stroke-dashoffset: 0;
  animation: 3s reveal3 linear infinite forwards;
}
@keyframes reveal3 {
  50%, 100% {
    stroke-dashoffset: 150;
  }
}

#doubled-separate-marker-2 {
  width: 110px;
}
#doubled-separate-marker-2 #arrow3 path {
  opacity: 0;
  animation: 10s revealarrow linear infinite forwards;
}
@keyframes revealarrow {
  0%, 50% { 
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}
#doubled-separate-marker-2 .over-path {
  fill: none;
  stroke-dasharray: 150;
  stroke-dashoffset: 0;
  animation: 10s reveal4 linear infinite forwards;
}
@keyframes reveal4 {
  50%, 100% {
    stroke-dashoffset: 150;
  }
}

#separate-marker-2 {
  width: 88px;
  position: relative;
  top:-4px;
}

<svg viewBox="0 0 44 97" preserveAspectRatio="xMinYMin meet" id="separate-marker-2">
    <defs>
        <marker id="arrow4" viewBox="0 0 13 13" refX="11" refY="8" markerWidth="13" markerHeight="13" markerUnits="userSpaceOnUse" orient="auto-start-reverse" preserveAspectRatio="xMinYMin meet">
            <path d="M3.66332316,0.125850427 L3.75090984,0.194245468 L12.2529105,7.89856961 C12.6592041,8.26674392 12.5414228,8.91869993 12.063138,9.1358919 L11.9627228,9.17332054 L0.963626457,12.4383634 C0.566538833,12.5562375 0.149079906,12.3298902 0.0312058479,11.9328025 C-0.0768453724,11.5688056 0.10434498,11.187691 0.441152309,11.0359066 L0.536766731,11.0003819 L10.2568836,8.11360225 L2.74367477,1.30576583 C2.46464034,1.05291103 2.41998014,0.63794112 2.62313708,0.333974789 L2.69153212,0.246388115 C2.94438692,-0.0326463148 3.35935683,-0.0773065179 3.66332316,0.125850427 L3.66332316,0.125850427 Z" fill="#B3B3B3" fill-rule="nonzero"></path>
        </marker>
    </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(1.000000, 1.000000)">
            <path d="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C9.41568622,72.6740094 10.2491558,73.7809605 11.1348599,74.8513572" class="just-line" stroke="#B3B3B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4" marker-end="url(#arrow4)">
              <animate attributeName="d" from="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C9.41568622,72.6740094 10.2491558,73.7809605 11.1348599,74.8513572" to="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C15.4626235,81.4917594 26.2993953,89.006995 41,91" dur="1.5s" repeatCount="indefinite"/>
            </path>
        </g>
    </g>
</svg>



<div id="desc">
  <ol>
    <li>Line and arrowhead are two paths grouped together, with an identical (but wide and white) line path on top that animates to reveal.</li>
    <li>Line path with arrowhead path attached as a marker. dash-offset animates on line path to add movement.</li>
    <li>Fusion of 1 and 2.  Line path with arrowhead as marker, white line path animating on top.  Shows that path+marker connection is much smoother than path+path, and that butt linecaps create a smoother animation finish than square or round (although it required moving the white path start-point a step or two to cover the marker).</li>
    <!-- figuring out CSS animation on an SVG marker was a JOURNEY -->
    <li>Adaptation of 3.  The arrowhead SVG marker has CSS animation applied.  Since it doesn't appear until after the line path is fully visible, the white line path on top has a narrower stroke since it doesn't need to cover the marker.  The animation timings are synced up via keyframe percentages.</li>
    <li>native SVG animate!</li>
  </ol>
  <p>DISCLAIMER: honestly no idea about browser support for any of this</p>
</div>

SVG箭头错误同步动画

SVG arrow wrong sync animation

html

css

svg-animate