numberedvaluesdeterminethegaplength.Astroke-dasharrayvalueof5, 10
meansthatthestrokewillbefivepixelslongwithagapof 10 pixelsbetweeneach
dash.Avalueof5, 5, 10alternatesfiveand 10 pixeldashlengthswithfivepixel
gapsinbetween.
Wecanusestroke-dasharraytocreateadrawingeffectbystartingwitha 0 dash
lengthandalargegap,andendingwithalargedashlengthandadashgapof0.
Thenwejusttransitionbetweenthetwo.Here'swhatourCSSlookslike:
css/chapter8/svg.css (excerpt)
circle {
transition: stroke-dasharray 1s ease-in;
fill: transparent;
stroke-dasharray: 0, 500;
}
.animate {
stroke-dasharray: 500, 0;
}Atthebeginningofthetransition,ourstrokeisinvisiblebecausethedashlength
is 0 andourgapis500.Butwhenweaddtheanimateclasstoourcircle,weshift
thedashlengthto 500 ,andeliminatethegap.Theeffectisabitlikedrawingacircle
withapairofcompasses,asseeninFigure8.8.Why500?It'sthesmallestvalue
thatworkedtocreatethisparticulareffect.
Using CSS with SVG 319