Flutter_svg: SVG with multiple gradient transforms throwing error

[VikasJilla]

<radialGradient cx="0%" cy="0%" fx="0%" fy="0%" r="99.0351718%" gradientTransform="translate(0.000000,0.000000),scale(0.891892,1.000000),rotate(51.447275),translate(-0.000000,-0.000000)" id="radialGradient-20">
 <stop stop-color="#FBAA30" stop-opacity="0.511117788" offset="0%"></stop>
 <stop stop-color="#FBC230" stop-opacity="0" offset="100%"></stop>
</radialGradient>

I/flutter (28075): Log.DEBUG : =================== CAUGHT FLUTTER ERROR
I/flutter (28075): Log.ERROR : Bad state: Unsupported transform: ,translate
I/flutter (28075): Stack Trace: #0 parseTransform (package:flutter_svg/src/svg/parsers.dart:109:7)
I/flutter (28075): #1 _Elements.radialGradient (package:flutter_svg/src/svg/parser_state.dart:244:39)
I/flutter (28075): #2 SvgParserState.parse (package:flutter_svg/src/svg/parser_state.dart:776:26)
I/flutter (28075):
I/flutter (28075): #3 SvgParser.parse (package:flutter_svg/parser.dart:14:60)
I/flutter (28075): #4 Svg.fromSvgString (package:flutter_svg/svg.dart:110:25)
I/flutter (28075): #5 Svg.svgPictureStringDecoder (package:flutter_svg/svg.dart:72:36)
I/flutter (28075): #6 SvgPicture.svgStringDecoder. (package:flutter_svg/svg.dart:531:15)
I/flutter (28075): #7 AssetBundlePictureProvider._loadAsync (package:flutter_svg/src/picture_provider.dart:457:19)
I/flutter (28075):
I/flutter (28075): #8 AssetBundlePictureProvider.load (package:flutter_svg/src/picture_provider.dart:435:43)
I/flutter (28075): #9 PictureProvider.resolve.. (package:flutter_svg/src/picture_provider.dart:327:17)
I/flutter (28075): #10 PictureCache.putIfAbsent (package:flutter_svg/src/picture_cache.dart:67:22)
I/flutter (28075): #11 Pict
I/flutter (28075): Log.INFO : #0 parseTransform (package:flutter_svg/src/svg/parsers.dart:109:7)
I/flutter (28075): #1 _Elements.radialGradient (package:flutter_svg/src/svg/parser_state.dart:244:39)
I/flutter (28075): #2 SvgParserState.parse (package:flutter_svg/src/svg/parser_state.dart:776:26)
I/flutter (28075):
I/flutter (28075): #3 SvgParser.parse (package:flutter_svg/parser.dart:14:60)
I/flutter (28075): #4 Svg.fromSvgString (package:flutter_svg/svg.dart:110:25)
I/flutter (28075): #5 Svg.svgPictureStringDecoder (package:flutter_svg/svg.dart:72:36)
I/flutter (28075): #6 SvgPicture.svgStringDecoder. (package:flutter_svg/svg.dart:531:15)
I/flutter (28075): #7 AssetBundlePictureProvider._loadAsync (package:flutter_svg/src/picture_provider.dart:457:19)
I/flutter (28075):
I/flutter (28075): #8 AssetBundlePictureProvider.load (package:flutter_svg/src/picture_provider.dart:435:43)
I/flutter (28075): #9 PictureProvider.resolve.. (package:flutter_svg/src/picture_provider.dart:327:17)
I/flutter (28075): #10 PictureCache.putIf

[shinriyo]

I guess it doesn't support gradient

I want to use linearGradient but it can't. Flutter's linearGradient are very bad so I wanna use SVG

<svg width="375" height="812" viewBox="0 0 375 812" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="375" height="812" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="100.216" y1="84" x2="517.404" y2="325.553" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFE5C5"/>
<stop offset="0.494792" stop-color="#D2B38B"/>
<stop offset="1" stop-color="#F1DDC3"/>
</linearGradient>
</defs>
</svg>

[joseignaciopergolesi]

@shinriyo
Something similar happened to me and I managed to solve it by doing the following:
change 'paint0_linear' to 'gradient' and put <defs> ... </defs>after

I hope you solve it by doing the following:

<svg width = "375" height = "812" viewBox = "0 0 375 812" fill = "none" xmlns = "http://www.w3.org/2000/svg">
<defs>
<linearGradient id = "gradient" x1 = "100.216" y1 = "84" x2 = "517.404" y2 = "325.553" gradientUnits = "userSpaceOnUse">
<stop stop-color = "# FFE5C5" />
<stop offset = "0.494792" stop-color = "# D2B38B" />
<stop offset = "1" stop-color = "# F1DDC3" />
</linearGradient>
</defs>
<rect width = "375" height = "812" fill = "url (#gradient)" />
</svg>

[muzzah]

Looking at the code where the parsing happens, it seems like a regexp matching bug since it includes the comma when looking up the parser in a hashmap

const Map<String, MatrixParser> _matrixParsers = <String, MatrixParser>{
  'matrix': _parseSvgMatrix,
  'translate': _parseSvgTranslate,
  'scale': _parseSvgScale,
  'rotate': _parseSvgRotate,
  'skewX': _parseSvgSkewX,
  'skewY': _parseSvgSkewY,
};

Because the comma is in the parsed text, it doesnt match it to anything. So this could be a simple fix. Is this correct @dnfield ?

[dnfield]

That sounds entirely reasonable to me @muzzah - if you can write up a test case and the fix I'd be happy to review a PR for it :)

[muzzah]

@dnfield Done! #378

[dnfield]

@VikasJilla this should be fixed on master now - please comment if it's still broken and we can reopen. I'll look to publish before long, but will have to figure out if this needs to be backported to 0.17.x too.

[rubinbasha]

I think there might be still an issue with parsing the SVG, I downloaded an SVG that had as the last instruction, the lib was not able to recognize that and the solution was to move the manually at the beginning of the file. Maybe there is a way to have 2 passes on the file when parsing it to first look for tags and then see where to use them.

[dnfield]

@rubinbasha that sounds like #102

Unfortunately, two passes is a) doubly expensive and b) not enough passes to solve that.

For example, your SVG file can validly have references that "bounce" back and forth, like this:

- defs:
  - Foo refs Bar
  - Baz refs Buzz
  - Fiz
- More elements ...
- Bar refs Buzz
- Buzz refs Fiz

If we change the library up to have mutable state it could work, but that gets much more difficult to debug and reason about.

If we change the library to use callbacks to resolve these things, you start getting deeply nested callback chains that might as well be mutable state :)

[rubinbasha]

Understand, ok, I guess we can live with having to manually check what's not going right.