CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Cristian C
Cristian C

Reputation: 75

SVG make dash line solid

I have a SVG element that I'm animating via JS and CSS; the SVG is imported from Illustrator. My animation runs nicely so this is more of a SVG (and possibly CSS) question.

There's a small part of the SVG that has some dashed lines; the goal is to have regular solid lines everywhere. Ideally, I would like to achieve this via CSS alone but if altering the SVG element is the only option, then so be it:

svg with dashed lines

One of the dashed lines:

<line xmlns="http://www.w3.org/2000/svg" class="st10" x1="538.7" y1="147.6" x2="633.9" y2="104.3"/>

and the st10 class:

.st10{fill:none;stroke:#000000;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2.9444,2.9444;}

CodePen link: https://codepen.io/sonofkyuss2401/pen/mqQJra

Upvotes: 0

Views: 1003

Answers (1)

Robert Longson
Robert Longson

Reputation: 124179

Remove the stroke-dasharray property from the st10 class. The line will then be solid and you can animate it as you wish.

Upvotes: 1

Related Questions