Strange SVG path syntax used in Snap.svg tutorial? -
while looking through snap.svg tutorial, came across following line of code made me double take:
// lets create pattern var p = s.path("m10-5-10,15m15,0,0,15m0-5-20,15")
what m10-5-10,15
? @ first, thought may have been kind of coordinate-range syntax, wouldn't make sense in case, , couldn't find remotely close in svg path spec. couldn't find of note in snap.svg docs.
interestingly enough, code seem draw desired pattern...
the simplest answer right one. there no special syntax - coordinates concatenated no white space.
the clue command: m
moveto
command, doesn't draw anything. if in the spec, however, you'll notice following:
if moveto followed multiple pairs of coordinates, subsequent pairs treated implicit lineto commands.
so, moveto
can have multiple coordinate pairs, , after first pair treated lineto
command. mystery syntax is, in reality, concise (but less readable) way of writing m10,-5 -10,15 m15,0 0,15 m0,-5 -20,15
, hyphens being negative signs.
simply looking @ svg path grammar shows quite arguments moveto
coordinate-pairs, , coordinates simple numbers.
i suppose key thing take away svg paths don't need whitespace or commas, unless numbers ambiguous without them.
Comments
Post a Comment