A problem about stroke-dashoffset in svg - Codes Helper - Programming Question Answer

A problem about stroke-dashoffset in svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .svgContent {
      border: 2px solid -sharpddd;
      background: -sharpddd;
      border-radius: 5px;
      width: 50%;
      margin: auto;
      height: 40px;
      line-height: 40px;
      padding-top: 20px;
    }
    .lineAnimation {
      -webkit-animation: testMove 3s linear infinite;
    }
    @-webkit-keyframes testMove {
      from {
        stroke-dashoffset: 100%
      }
      to {
        stroke-dashoffset: 0
      }
    }
    </style>
</head>
<body>
    <div class="svgContent">
      <svg viewBox="0 0 300 10">
          <line class="lineAnimation" x1="0" y1="0" x2="300" y2="0" 
          stroke="black" stroke-width="10" stroke-dasharray="40,10" stroke-dashoffset="" />
      </svg>
    </div>
</body>
</html>

does not quite understand the changing process of stroke-dashoffset:100%-> 0.
seems to be because 100% and 0% do not coincide, and the animation flashes when it is repeated.
Source of the problem: this problem was found when using the plug-in leaflet-ant-path. Looking at the source code, we found that the animation effect is to change stroke-offset:100%-> 0
leaflet-ant-path official website address: https://rubenspgcavalcante.gi.
official website gives the same problem.

Css svg-Animation svg

Aug.19,2021

you understand correctly that 100% and 0% do not coincide, so something goes wrong. Just get a value that can be coincident. Stroke-dasharray= "40 ~ 10", so you can set a multiple of 40 minutes 10 = 50 to make sure that from and to look the same

.

@-webkit-keyframes testMove {

  from {
    stroke-dashoffset: 50; /* 40 + 10*/
  }
  to {
    stroke-dashoffset: 0
  }
}

is really because 0 and 100% do not coincide, because although this 100% is the relative position of stroke-dasharray , the value of 100% itself is relative to the current viewport , so the 100% here is converted to px, is not 300px.

therefore, to achieve the effect of a smooth loop, if stroke-dashoffset uses percentages, then stroke-dasharray also uses percentages. At the same time, regardless of the percentage or the specific value, the starting and ending point of stoke-dashoffset is a multiple of the sum of stroke-dasharray . The higher the value, the faster the visual movement speed.

'stroke-dashoffset' specifies the distance into the dash pattern to start the dash.
If a < percentage > is used, the value represents a percentage of the current viewport (see Units).
Values can be negative.
https://www.w3.org/TR/SVG11/p.

Previous: The mysql update data increases the field amount and returns 1, but the final data is not updated.

Next: Python selenium

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea320f-1c30.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea320f-1c30.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?