CODEWITHSUNDEEP
htmlcsssvg
Jerome2606
Jerome2606

Reputation: 955

svg why dasharray is not working as expected

I'm very new in SVG and animation. I read some tutorials online and I would like to achieve a "drawing" icon effect in order to have a loading image: https://www.cassie.codes/posts/creating-my-logo-animation/#heading-svg-stroke-dasharray

I have created a codepen with my paths. I apply to it a dasharray but it doesn't have the same effect than in tutorial and I don't understand why

The SVG was generated from Avocode (design from my designer).

https://codepen.io/JeromeLam/pen/pooYPwp

<svg xmlns="http://www.w3.org/2000/svg">
  <path class="test2" fill="#fe5915" d="M12.17 43.373H1.756A1.036 1.036 0 01.72 42.337V15.915c0-.28.112-.547.313-.742L16.008.592c.193-.189.452-.294.723-.294h10.416a1.036 1.036 0 110 2.072h-9.995L2.792 16.352V41.3h9.379a1.036 1.036 0 010 2.073z"/>
  <g>
    <path class="test3" fill="#fe5915" d="M27.597 36.145c-3.477 0-6.742-1.138-8.734-3.044a1.036 1.036 0 111.433-1.497c1.615 1.546 4.345 2.468 7.301 2.468 2.977 0 5.716-.932 7.328-2.493a1.036 1.036 0 011.441 1.49c-1.989 1.926-5.267 3.076-8.769 3.076z"/>
  </g>
  <g>
    <path class="test4" stroke="000000" stroke-width="4" d="M13.207 16.243l13.94-13.572 13.94 13.572v24.948h-27.88zm29.952 25.984V15.806c0-.28-.113-.547-.313-.742L27.87.483a1.036 1.036 0 00-1.446 0l-14.976 14.58a1.04 1.04 0 00-.314.743v26.421c0 .573.464 1.036 1.037 1.036h29.952c.572 0 1.036-.463 1.036-1.036z"/>
  </g>
</svg>

CSS:

path.test4 {
  stroke-dasharray: 20;
}

Upvotes: 1

Views: 1429

Answers (1)

enxaneta
enxaneta

Reputation: 33034

As I've commented: Your path is a complex path with a hole in the middle. What you are seeing is the path filled with black. You can't see the dashes because you are seeing the fill. In order to see the dashes you may need to simplify the path like so: 

path.test4 {
  stroke-dasharray: 20;
}
<svg xmlns="http://www.w3.org/2000/svg">
    <path class="test4" stroke="#000000" fill="none" stroke-width="4" d="M13.207 16.243l13.94-13.572 13.94 13.572v24.948h-27.88z"/>
</svg>

The d attribute I'm using is the first part of what you have. I've deleted everything from the m command to the end. The removed part is drawing the "hole"

Upvotes: 1

Related Questions