CODEWITHSUNDEEP
htmlcsssvg
MANiC
MANiC

Reputation: 103

Animated dashed line using SVG

I try to find a way to draw an animated dash line like HERE.

The problem with this solution is, that a black line is drawn underneath a dashed white line. The thing is, I want to have the middle parts (the spaces between the dashes) transparent, to put this animation on the top of a map image, not filled with color's (like white in this example).

I tried with different set ups of the stroke-dasharray and stroke-dashoffset attribute, but all this results were not like the way I search for.

Currently I embed a svg object directly in my HTML document. The svg tag includes the path tag, which is recommended for the path itself. The animation I try to realize with simple css animation key frames like:

    @keyframes dash
    {
        from
        {
            stroke-dashoffset: 1000;
        }
        to
        {
            stroke-dashoffset: 0;
        }
    }

Upvotes: 2

Views: 1738

Answers (1)

Persijn
Persijn

Reputation: 14990

The space between the dashes is by default transparent. Is there something your doing to change the color?

svg {
  background-image: linear-gradient(45deg, red, blue);
}
svg circle {
  fill: pinK;
  stroke: rgba(0, 0, 0, 0.9);
  stroke-width: 10px;
  stroke-dasharray: 5;
  stroke-dashoffset: 0;
  animation: test 10s;
  -webkit-animation: test 10s;
}
@keyframes test {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 200;
  }
}
@-webkit-keyframes test {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 200;
  }
}
<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" />
</svg>

Upvotes: 0

Related Questions