Svg pars

[asturur]

Specs says that a space or comma between two transform is needed.
Chrome and firefox do not care for this space.
So maybe we should not care as well.

closes #2730

[asturur]

@kangax what do you think?

[asturur]

@kangax Any chance to give a quick look to this?

[kangax]

@asturur I would love to hear from one of the implementors (firefox, chrome, edge) if this is indeed an existing spec violation.

@dstorey @tschneidereit @paulirish folks, any chance to ping one of your engineers familiar with SVG implementation in a browser?

[asturur]

Just to show here in one place:
edge:

firefox:

chrome:

svg:

<svg width="400px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(195,200)"><text style="font-size: 26px; font-family: Impact; fill: rgb(82, 84, 163);" text-anchor="middle" transform="translate(88,8)rotate(90)">amit</text><text style="font-size: 26px; font-family: Impact; fill: rgb(140, 162, 82);" text-anchor="middle" transform="translate(27,17)rotate(90)">dolor</text><text style="font-size: 26px; font-family: Impact; fill: rgb(222, 158, 214);" text-anchor="middle" transform="translate(-19,7)rotate(90)">ipsum</text><text style="font-size: 26px; font-family: Impact; fill: rgb(107, 110, 207);" text-anchor="middle" transform="translate(-59,58)rotate(0)">amit</text><text style="font-size: 26px; font-family: Impact; fill: rgb(165, 81, 148);" text-anchor="middle" transform="translate(66,66)rotate(90)">amit</text><text style="font-size: 26px; font-family: Impact; fill: rgb(214, 97, 107);" text-anchor="middle" transform="translate(-65,-50)rotate(90)">sit</text><text style="font-size: 26px; font-family: Impact; fill: rgb(231, 186, 82);" text-anchor="middle" transform="translate(-39,-58)rotate(90)">sit</text><text style="font-size: 26px; font-family: Impact; fill: rgb(212, 179, 117);" text-anchor="middle" transform="translate(91,81)rotate(90)">Lorium</text><text style="font-size: 25px; font-family: Impact; fill: rgb(194, 172, 152);" text-anchor="middle" transform="translate(53,-5)rotate(90)">ipsum</text><text style="font-size: 25px; font-family: Impact; fill: rgb(175, 165, 187);" text-anchor="middle" transform="translate(-14,-64)rotate(90)">amit</text><text style="font-size: 25px; font-family: Impact; fill: rgb(156, 158, 222);" text-anchor="middle" transform="translate(-59,87)rotate(90)">amit</text><text style="font-size: 25px; font-family: Impact; fill: rgb(136, 138, 202);" text-anchor="middle" transform="translate(99,-41)rotate(0)">sit</text><text style="font-size: 25px; font-family: Impact; fill: rgb(116, 118, 182);" text-anchor="middle" transform="translate(17,-19)rotate(0)">sit</text><text style="font-size: 25px; font-family: Impact; fill: rgb(97, 99, 161);" text-anchor="middle" transform="translate(1,34)rotate(90)">sit</text><text style="font-size: 25px; font-family: Impact; fill: rgb(77, 79, 141);" text-anchor="middle" transform="translate(145,25)rotate(90)">Lorium</text><text style="font-size: 25px; font-family: Impact; fill: rgb(57, 59, 121);" text-anchor="middle" transform="translate(42,83)rotate(90)">ipsum</text><text style="font-size: 25px; font-family: Impact; fill: rgb(82, 53, 103);" text-anchor="middle" transform="translate(-100,68)rotate(90)">sit</text><text style="font-size: 24px; font-family: Impact; fill: rgb(107, 47, 85);" text-anchor="middle" transform="translate(-89,-6)rotate(90)">Lorium</text><text style="font-size: 24px; font-family: Impact; fill: rgb(131, 42, 66);" text-anchor="middle" transform="translate(-26,72)rotate(90)">dolor</text><text style="font-size: 24px; font-family: Impact; fill: rgb(156, 36, 48);" text-anchor="middle" transform="translate(-3,117)rotate(0)">amit</text><text style="font-size: 24px; font-family: Impact; fill: rgb(181, 30, 30);" text-anchor="middle" transform="translate(11,-83)rotate(90)">Lorium</text><text style="font-size: 24px; font-family: Impact; fill: rgb(172, 33, 30);" text-anchor="middle" transform="translate(54,-44)rotate(0)">amit</text><text style="font-size: 24px; font-family: Impact; fill: rgb(163, 36, 31);" text-anchor="middle" transform="translate(-50,4)rotate(90)">dolor</text><text style="font-size: 24px; font-family: Impact; fill: rgb(154, 39, 31);" text-anchor="middle" transform="translate(146,-23)rotate(0)">dolor</text><text style="font-size: 24px; font-family: Impact; fill: rgb(146, 41, 31);" text-anchor="middle" transform="translate(-126,25)rotate(0)">ipsum</text><text style="font-size: 23px; font-family: Impact; fill: rgb(137, 44, 32);" text-anchor="middle" transform="translate(95,-72)rotate(0)">ipsum</text><text style="font-size: 23px; font-family: Impact; fill: rgb(128, 47, 32);" text-anchor="middle" transform="translate(141,-50)rotate(0)">amit</text><text style="font-size: 23px; font-family: Impact; fill: rgb(119, 50, 32);" text-anchor="middle" transform="translate(-45,-80)rotate(0)">dolor</text><text style="font-size: 23px; font-family: Impact; fill: rgb(110, 53, 33);" text-anchor="middle" transform="translate(54,-97)rotate(0)">amit</text><text style="font-size: 23px; font-family: Impact; fill: rgb(101, 56, 33);" text-anchor="middle" transform="translate(-118,-24)rotate(90)">dolor</text><text style="font-size: 23px; font-family: Impact; fill: rgb(93, 59, 34);" text-anchor="middle" transform="translate(-28,-109)rotate(0)">ipsum</text><text style="font-size: 23px; font-family: Impact; fill: rgb(84, 61, 34);" text-anchor="middle" transform="translate(112,-95)rotate(0)">dolor</text><text style="font-size: 23px; font-family: Impact; fill: rgb(75, 64, 34);" text-anchor="middle" transform="translate(-1,69)rotate(90)">sit</text><text style="font-size: 23px; font-family: Impact; fill: rgb(66, 67, 35);" text-anchor="middle" transform="translate(-87,100)rotate(90)">sit</text><text style="font-size: 23px; font-family: Impact; fill: rgb(57, 70, 35);" text-anchor="middle" transform="translate(-137,0)rotate(0)">sit</text><text style="font-size: 23px; font-family: Impact; fill: rgb(48, 73, 35);" text-anchor="middle" transform="translate(122,75)rotate(90)">ipsum</text><text style="font-size: 23px; font-family: Impact; fill: rgb(39, 76, 36);" text-anchor="middle" transform="translate(-110,-55)rotate(0)">amit</text><text style="font-size: 23px; font-family: Impact; fill: rgb(31, 78, 36);" text-anchor="middle" transform="translate(-123,79)rotate(90)">Lorium</text><text style="font-size: 22px; font-family: Impact; fill: rgb(22, 81, 36);" text-anchor="middle" transform="translate(-152,-54)rotate(90)">Lorium</text><text style="font-size: 22px; font-family: Impact; fill: rgb(13, 84, 37);" text-anchor="middle" transform="translate(71,127)rotate(0)">sit</text><text style="font-size: 22px; font-family: Impact; fill: rgb(4, 87, 37);" text-anchor="middle" transform="translate(84,-122)rotate(0)">Lorium</text><text style="font-size: 22px; font-family: Impact; fill: rgb(5, 87, 45);" text-anchor="middle" transform="translate(-151,77)rotate(0)">amit</text><text style="font-size: 22px; font-family: Impact; fill: rgb(6, 87, 52);" text-anchor="middle" transform="translate(-99,-104)rotate(90)">dolor</text><text style="font-size: 22px; font-family: Impact; fill: rgb(7, 87, 60);" text-anchor="middle" transform="translate(-126,-108)rotate(90)">Lorium</text><text style="font-size: 22px; font-family: Impact; fill: rgb(8, 87, 67);" text-anchor="middle" transform="translate(-148,-118)rotate(90)">amit</text><text style="font-size: 22px; font-family: Impact; fill: rgb(9, 88, 75);" text-anchor="middle" transform="translate(-1,-129)rotate(0)">Lorium</text><text style="font-size: 22px; font-family: Impact; fill: rgb(10, 88, 82);" text-anchor="middle" transform="translate(-162,106)rotate(90)">amit</text><text style="font-size: 21px; font-family: Impact; fill: rgb(11, 88, 90);" text-anchor="middle" transform="translate(144,95)rotate(90)">dolor</text><text style="font-size: 21px; font-family: Impact; fill: rgb(12, 88, 97);" text-anchor="middle" transform="translate(-153,54)rotate(0)">amit</text><text style="font-size: 21px; font-family: Impact; fill: rgb(13, 88, 105);" text-anchor="middle" transform="translate(150,-94)rotate(90)">amit</text><text style="font-size: 21px; font-family: Impact; fill: rgb(14, 88, 112);" text-anchor="middle" transform="translate(39,-73)rotate(90)">sit</text><text style="font-size: 21px; font-family: Impact; fill: rgb(14, 88, 120);" text-anchor="middle" transform="translate(1,133)rotate(90)">sit</text><text style="font-size: 20px; font-family: Impact; fill: rgb(15, 88, 127);" text-anchor="middle" transform="translate(149,-126)rotate(0)">amit</text><text style="font-size: 20px; font-family: Impact; fill: rgb(16, 88, 135);" text-anchor="middle" transform="translate(25,132)rotate(90)">sit</text><text style="font-size: 20px; font-family: Impact; fill: rgb(17, 88, 142);" text-anchor="middle" transform="translate(-73,130)rotate(0)">ipsum</text><text style="font-size: 19px; font-family: Impact; fill: rgb(18, 89, 150);" text-anchor="middle" transform="translate(168,77)rotate(90)">ipsum</text><text style="font-size: 19px; font-family: Impact; fill: rgb(19, 89, 157);" text-anchor="middle" transform="translate(117,120)rotate(90)">sit</text><text style="font-size: 19px; font-family: Impact; fill: rgb(20, 89, 165);" text-anchor="middle" transform="translate(-165,1)rotate(0)">sit</text><text style="font-size: 17px; font-family: Impact; fill: rgb(21, 89, 172);" text-anchor="middle" transform="translate(-139,122)rotate(90)">amit</text><text style="font-size: 17px; font-family: Impact; fill: rgb(22, 89, 180);" text-anchor="middle" transform="translate(164,129)rotate(90)">amit</text><text style="font-size: 16px; font-family: Impact; fill: rgb(23, 89, 187);" text-anchor="middle" transform="translate(-171,36)rotate(0)">sit</text><text style="font-size: 16px; font-family: Impact; fill: rgb(28, 86, 181);" text-anchor="middle" transform="translate(-176,-45)rotate(90)">dolor</text><text style="font-size: 16px; font-family: Impact; fill: rgb(33, 84, 174);" text-anchor="middle" transform="translate(-181,106)rotate(90)">dolor</text><text style="font-size: 16px; font-family: Impact; fill: rgb(38, 81, 168);" text-anchor="middle" transform="translate(177,-58)rotate(90)">amit</text><text style="font-size: 16px; font-family: Impact; fill: rgb(42, 78, 162);" text-anchor="middle" transform="translate(175,25)rotate(90)">dolor</text><text style="font-size: 16px; font-family: Impact; fill: rgb(47, 76, 156);" text-anchor="middle" transform="translate(-75,-118)rotate(90)">amit</text><text style="font-size: 16px; font-family: Impact; fill: rgb(52, 73, 149);" text-anchor="middle" transform="translate(94,-21)rotate(0)">amit</text><text style="font-size: 15px; font-family: Impact; fill: rgb(57, 70, 143);" text-anchor="middle" transform="translate(4,-4)rotate(90)">sit</text><text style="font-size: 15px; font-family: Impact; fill: rgb(62, 68, 137);" text-anchor="middle" transform="translate(-178,-90)rotate(90)">ipsum</text><text style="font-size: 13px; font-family: Impact; fill: rgb(67, 65, 130);" text-anchor="middle" transform="translate(182,-16)rotate(90)">dolor</text><text style="font-size: 13px; font-family: Impact; fill: rgb(72, 63, 124);" text-anchor="middle" transform="translate(21,92)rotate(0)">sit</text><text style="font-size: 13px; font-family: Impact; fill: rgb(76, 60, 118);" text-anchor="middle" transform="translate(89,139)rotate(90)">sit</text><text style="font-size: 13px; font-family: Impact; fill: rgb(81, 57, 111);" text-anchor="middle" transform="translate(-66,14)rotate(90)">amit</text><text style="font-size: 13px; font-family: Impact; fill: rgb(86, 55, 105);" text-anchor="middle" transform="translate(179,-97)rotate(90)">dolor</text><text style="font-size: 13px; font-family: Impact; fill: rgb(91, 52, 99);" text-anchor="middle" transform="translate(-138,93)rotate(0)">sit</text><text style="font-size: 12px; font-family: Impact; fill: rgb(96, 49, 93);" text-anchor="middle" transform="translate(73,19)rotate(90)">amit</text><text style="font-size: 12px; font-family: Impact; fill: rgb(101, 47, 86);" text-anchor="middle" transform="translate(-23,134)rotate(0)">amit</text><text style="font-size: 12px; font-family: Impact; fill: rgb(105, 44, 80);" text-anchor="middle" transform="translate(184,124)rotate(90)">ipsum</text><text style="font-size: 12px; font-family: Impact; fill: rgb(110, 41, 74);" text-anchor="middle" transform="translate(-31,-28)rotate(0)">sit</text><text style="font-size: 11px; font-family: Impact; fill: rgb(115, 39, 67);" text-anchor="middle" transform="translate(-63,-21)rotate(0)">sit</text><text style="font-size: 11px; font-family: Impact; fill: rgb(120, 36, 61);" text-anchor="middle" transform="translate(53,41)rotate(0)">sit</text><text style="font-size: 11px; font-family: Impact; fill: rgb(114, 41, 64);" text-anchor="middle" transform="translate(-172,-134)rotate(90)">dolor</text><text style="font-size: 10px; font-family: Impact; fill: rgb(108, 45, 68);" text-anchor="middle" transform="translate(-73,-15)rotate(0)"/><text style="font-size: 10px; font-family: Impact; fill: rgb(102, 50, 71);" text-anchor="middle" transform="translate(-96,50)rotate(0)">sit</text><text style="font-size: 10px; font-family: Impact; fill: rgb(96, 54, 74);" text-anchor="middle" transform="translate(-80,-72)rotate(90)">sit</text><text style="font-size: 10px; font-family: Impact; fill: rgb(90, 59, 78);" text-anchor="middle" transform="translate(-74,73)rotate(90)">sit</text><text style="font-size: 10px; font-family: Impact; fill: rgb(84, 64, 81);" text-anchor="middle" transform="translate(147,136)rotate(90)">dolor</text><text style="font-size: 10px; font-family: Impact; fill: rgb(78, 68, 84);" text-anchor="middle" transform="translate(-94,-136)rotate(0)">sit</text><text style="font-size: 10px; font-family: Impact; fill: rgb(72, 73, 88);" text-anchor="middle" transform="translate(180,-131)rotate(90)">sit</text><text style="font-size: 9px; font-family: Impact; fill: rgb(66, 77, 91);" text-anchor="middle" transform="translate(-8,-97)rotate(0)">sit</text><text style="font-size: 9px; font-family: Impact; fill: rgb(60, 82, 95);" text-anchor="middle" transform="translate(-118,134)rotate(90)">dolor</text><text style="font-size: 8px; font-family: Impact; fill: rgb(54, 87, 98);" text-anchor="middle" transform="translate(57,141)rotate(0)">dolor</text><text style="font-size: 8px; font-family: Impact; fill: rgb(48, 91, 101);" text-anchor="middle" transform="translate(-161,142)rotate(0)">Lorium</text><text style="font-size: 8px; font-family: Impact; fill: rgb(42, 96, 105);" text-anchor="middle" transform="translate(10,16)rotate(0)">amit</text><text style="font-size: 8px; font-family: Impact; fill: rgb(36, 100, 108);" text-anchor="middle" transform="translate(-54,142)rotate(0)">ipsum</text><text style="font-size: 8px; font-family: Impact; fill: rgb(30, 105, 111);" text-anchor="middle" transform="translate(71,-11)rotate(90)">sit</text><text style="font-size: 8px; font-family: Impact; fill: rgb(24, 110, 115);" text-anchor="middle" transform="translate(120,-142)rotate(0)">dolor</text><text style="font-size: 8px; font-family: Impact; fill: rgb(18, 114, 118);" text-anchor="middle" transform="translate(-61,-142)rotate(0)">dolor</text><text style="font-size: 7px; font-family: Impact; fill: rgb(12, 119, 121);" text-anchor="middle" transform="translate(-178,13)rotate(0)">dolor</text><text style="font-size: 7px; font-family: Impact; fill: rgb(6, 123, 125);" text-anchor="middle" transform="translate(-100,101)rotate(90)">ipsum</text><text style="font-size: 6px; font-family: Impact; fill: rgb(0, 128, 128);" text-anchor="middle" transform="translate(-23,145)rotate(0)">dolor</text><text style="font-size: 6px; font-family: Impact; fill: rgb(0, 133, 131);" text-anchor="middle" transform="translate(-129,-25)rotate(0)">sit</text><text style="font-size: 6px; font-family: Impact; fill: rgb(0, 137, 135);" text-anchor="middle" transform="translate(109,-2)rotate(90)">amit</text><text style="font-size: 6px; font-family: Impact; fill: rgb(0, 142, 138);" text-anchor="middle" transform="translate(-183,57)rotate(90)">ipsum</text><text style="font-size: 5px; font-family: Impact; fill: rgb(0, 146, 141);" text-anchor="middle" transform="translate(-38,71)rotate(0)">sit</text><text style="font-size: 5px; font-family: Impact; fill: rgb(0, 151, 145);" text-anchor="middle" transform="translate(16,56)rotate(90)">sit</text><text style="font-size: 5px; font-family: Impact; fill: rgb(0, 156, 148);" text-anchor="middle" transform="translate(-78,142)rotate(90)">dolor</text><text style="font-size: 5px; font-family: Impact; fill: rgb(0, 160, 151);" text-anchor="middle" transform="translate(-61,-7)rotate(0)">sit</text><text style="font-size: 5px; font-family: Impact; fill: rgb(0, 165, 155);" text-anchor="middle" transform="translate(26,70)rotate(90)">amit</text><text style="font-size: 5px; font-family: Impact; fill: rgb(0, 169, 158);" text-anchor="middle" transform="translate(87,-60)rotate(90)">sit</text><text style="font-size: 4px; font-family: Impact; fill: rgb(0, 174, 162);" text-anchor="middle" transform="translate(78,100)rotate(90)">dolor</text><text style="font-size: 4px; font-family: Impact; fill: rgb(0, 179, 165);" text-anchor="middle" transform="translate(135,-80)rotate(90)">Lorium</text><text style="font-size: 4px; font-family: Impact; fill: rgb(0, 183, 168);" text-anchor="middle" transform="translate(0,91)rotate(0)">Lorium</text><text style="font-size: 4px; font-family: Impact; fill: rgb(0, 188, 172);" text-anchor="middle" transform="translate(30,107)rotate(90)">amit</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 192, 175);" text-anchor="middle" transform="translate(-106,8)rotate(0)">ipsum</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 197, 178);" text-anchor="middle" transform="translate(99,-142)rotate(90)">Lorium</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 202, 182);" text-anchor="middle" transform="translate(-5,-33)rotate(0)">Lorium</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 206, 185);" text-anchor="middle" transform="translate(-38,119)rotate(90)">Lorium</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 211, 188);" text-anchor="middle" transform="translate(-54,-67)rotate(0)">Lorium</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 215, 192);" text-anchor="middle" transform="translate(39,-88)rotate(0)">ipsum</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 220, 195);" text-anchor="middle" transform="translate(-93,-48)rotate(0)">amit</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 225, 198);" text-anchor="middle" transform="translate(39,-37)rotate(0)">Lorium</text><text style="font-size: 3px; font-family: Impact; fill: rgb(0, 229, 202);" text-anchor="middle" transform="translate(66,98)rotate(0)">dolor</text><text style="font-size: 2px; font-family: Impact; fill: rgb(0, 234, 205);" text-anchor="middle" transform="translate(-47,-30)rotate(90)">ipsum</text><text style="font-size: 2px; font-family: Impact; fill: rgb(0, 238, 208);" text-anchor="middle" transform="translate(31,-60)rotate(90)">sit</text><text style="font-size: 2px; font-family: Impact; fill: rgb(0, 243, 212);" text-anchor="middle" transform="translate(-72,64)rotate(0)">ipsum</text><text style="font-size: 2px; font-family: Impact; fill: rgb(0, 248, 215);" text-anchor="middle" transform="translate(169,1)rotate(90)">dolor</text><text style="font-size: 2px; font-family: Impact; fill: rgb(0, 252, 218);" text-anchor="middle" transform="translate(-67,-14)rotate(0)">ipsum</text><text style="font-size: 2px; font-family: Impact; fill: rgb(0, 255, 222);" text-anchor="middle" transform="translate(-66,32)rotate(0)">sit</text><text style="font-size: 2px; font-family: Impact; fill: rgb(0, 255, 225);" text-anchor="middle" transform="translate(-61,37)rotate(90)">ipsum</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 229);" text-anchor="middle" transform="translate(80,-32)rotate(0)">dolor</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 232);" text-anchor="middle" transform="translate(-23,-40)rotate(0)">Lorium</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 235);" text-anchor="middle" transform="translate(92,38)rotate(0)">sit</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 239);" text-anchor="middle" transform="translate(-79,-57)rotate(0)">ipsum</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 242);" text-anchor="middle" transform="translate(62,-40)rotate(0)">ipsum</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 245);" text-anchor="middle" transform="translate(51,46)rotate(0)">Lorium</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 249);" text-anchor="middle" transform="translate(-48,62)rotate(0)">dolor</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 252);" text-anchor="middle" transform="translate(90,-36)rotate(0)">Lorium</text><text style="font-size: 1px; font-family: Impact; fill: rgb(0, 255, 255);" text-anchor="middle" transform="translate(22,-42)rotate(90)">amit</text><text style="font-size: 0px; font-family: Impact; fill: rgb(0, 255, 255);" text-anchor="middle" transform="translate(1,-9)rotate(0)">sit</text><text style="font-size: 0px; font-family: Impact; fill: rgb(0, 255, 255);" text-anchor="middle" transform="translate(77,7)rotate(0)">sit</text><text style="font-size: 0px; font-family: Impact; fill: rgb(0, 255, 255);" text-anchor="middle" transform="translate(57,74)rotate(90)">amit</text><text style="font-size: 0px; font-family: Impact; fill: rgb(0, 255, 255);" text-anchor="middle" transform="translate(46,22)rotate(90)">ipsum</text></g></svg>

[dstorey]

@erikdahlstrom should be a useful person to ask, and @boggydigital on Edge’s side.

[tschneidereit]

Looks like we're a bit lenient there, yes. Whether that's likely at all to change or the spec should just be changed to align with reality, I don't know. @heycam, can you comment?

[asturur]

My personalo opinoin is that whetever is, or will be, in the spec, undestanding the transform attribute without spaces is a good feature.

-transform value do not overlap each other so that the space ( or comma ) is necessary.

-filling a transform attribute without spaces intentionally to make the transform uneffective is very unlikely.

[asturur]

@kangax i still belive we should just merge this.

[heycam]

The space between the transform items should be optional. Especially now given that the SVG transform="" attribute is a presentation attribute for the transform property, where no space between the functions is required.

[asturur]

Thanks juriy.