search

dnfield / flutter_svg

SVG parsing, rendering, and widget library for Flutter
MIT License
1.64k stars 449 forks source link

Error to open svg: Invalid double 100% #559

Open Ron-Junior opened 3 years ago

Ron-Junior commented 3 years ago

So when opening this link https://s3.glbimg.com/v1/AUTH_58d78b787ec34892b5aaa0c7a146155f/cartola_svg_185/escudo/01/33/58/0085562bf0-96a3-4227-9d76-8c46fd9ccc0120210502223358

We have this error: Invalid double 100%

So the problem here is that the function parseDouble on "svg/parser_state.dart" only removes the px string to the "maybeDouble" variable. So.. in my humble opinion the solutions is maybeDouble = maybeDouble.trim().replaceFirst(RegExp(r'(px|%)'), '');

The stack trace below: When the exception was thrown, this was the stack

0 double.parse (dart:core-patch/double_patch.dart:111:28)

1 parseDouble package:flutter_svg/…/utilities/numbers.dart:15

2 _Paths.rect package:flutter_svg/…/svg/parser_state.dart:655

3 SvgParserState.addShape package:flutter_svg/…/svg/parser_state.dart:874

4 SvgParserState.startElement package:flutter_svg/…/svg/parser_state.dart:902

smallbad commented 3 years ago

I also met this problem, but it's wrong to just remove the percentage sign. The percentage appears in the inner label of SVG, hoping that it will fill the whole SVG space. Simply removing the percentage sign will cause the problem of abnormal width and height. He should find the height and width of his parent element

kimmanwky commented 2 years ago

anyone fixed this issue? i have the same problem. It is still not working on v0.22.0.

ZaifSenpai commented 2 years ago

Same issue occurred while trying to show this SVG

pansitwattana commented 2 years ago

Hello, I also got this error. How to fix this bugs? P.S. I can't modify image I download from network.

pansitwattana commented 2 years ago

I got solution here. I don't know if this is the best solution.

using this library: https://pub.dev/packages/flutter_inappwebview

InAppWebView(
  initialUrlRequest: URLRequest(
    url: Uri.dataFromString(
      '''<svg width="100%" height="100%">       
            <image xlink:href="$qrCodeSvgUrl" width="100%" height="100%"/>    
        </svg>''',
      mimeType: 'text/html',
      encoding: Encoding.getByName('utf-8'),
    ),
  ),
),
gerken-tss commented 1 year ago

@pansitwattana Your solution works, not bad! The only drawback is that all the caching capabilities and other things like placeholder widgets that are part of the flutter_svg package are not directly available like this. As a temporary workaround, it's fine though, I guess.

ynsmrkrds commented 10 months ago

Hello. Is there a new solution?

YashIngole commented 8 months ago

any solution yet?

angelru commented 8 months ago

any solution?? Invalid double

JuKu commented 6 months ago

Same problem here. Maybe flutter_svg is incompatible with any SVGs which use the "fill" command?

gentunian commented 4 months ago

same here for a flag svg I need to render:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2100 -1470 4200 2940">
<defs>
<path id="D" fill-rule="evenodd" d="m-31.5 0h33a30 30 0 0 0 30 -30v-10a30 30 0 0 0 -30 -30h-33zm13-13h19a19 19 0 0 0 19 -19v-6a19 19 0 0 0 -19 -19h-19z"/>
<path id="E" transform="translate(-31.5)" d="m0 0h63v-13h-51v-18h40v-12h-40v-14h48v-13h-60z"/>
<path id="e" d="m-26.25 0h52.5v-12h-40.5v-16h33v-12h-33v-11h39.25v-12h-51.25z"/>
<g id="G">
<clipPath id="gcut">
<path d="m-31.5 0v-70h63v70zm31.5-47v12h31.5v-12z"/>
</clipPath>
<use xlink:href="#O" clip-path="url(#gcut)"/>
<rect y="-35" x="5" height="10" width="26.5"/>
<rect y="-35" x="21.5" height="35" width="10"/>
</g>
<path id="M" d="m-31.5 0h12v-48l14 48h11l14-48v48h12v-70h-17.5l-14 48-14-48h-17.5z"/>
<path id="O" fill-rule="evenodd" d="m0 0a31.5 35 0 0 0 0 -70 31.5 35 0 0 0 0 70m0-13a18.5 22 0 0 0 0 -44 18.5 22 0 0 0 0 44"/>
<path id="P" fill-rule="evenodd" d="m-31.5 0h13v-26h28a22 22 0 0 0 0 -44h-40zm13-39h27a9 9 0 0 0 0 -18h-27z"/>
<g id="R">
<use xlink:href="#P"/>
<path d="m28 0c0-10 0-32-15-32h-19c22 0 22 22 22 32"/>
</g>
<path id="S" d="m-15.75-22c0 7 6.75 10.5 16.75 10.5s14.74-3.25 14.75-7.75c0-14.25-46.75-5.25-46.5-30.25 0.25-21.5 24.75-20.5 33.75-20.5s26 4 25.75 21.25h-15.25c0-7.5-7-10.25-15-10.25-7.75 0-13.25 1.25-13.25 8.5-0.25 11.75 46.25 4 46.25 28.75 0 18.25-18 21.75-31.5 21.75-11.5 0-31.55-4.5-31.5-22z"/>
<g id="star" fill="#fff">
<g id="c">
<path id="t" transform="rotate(18 0,-1)" d="m0-1v1h0.5"/>
<use xlink:href="#t" transform="scale(-1,1)"/>
</g>
<use xlink:href="#c" transform="rotate(72)"/>
<use xlink:href="#c" transform="rotate(-72)"/>
<use xlink:href="#c" transform="rotate(144)"/>
<use xlink:href="#c" transform="rotate(216)"/>
</g>
<use id="star1" xlink:href="#star" transform="scale(31.5)"/>
<use id="star2" xlink:href="#star" transform="scale(26.25)"/>
<use id="star3" xlink:href="#star" transform="scale(21)"/>
<use id="star4" xlink:href="#star" transform="scale(15)"/>
<use id="star5" xlink:href="#star" transform="scale(10.5)"/>
</defs>
<rect y="-50%" x="-50%" height="100%" fill="#009b3a" width="100%"/>
<path d="m-1743 0 1743 1113 1743-1113-1743-1113z" fill="#fedf00"/>
<circle r="735" fill="#002776"/>
<clipPath id="band">
<circle r="735"/>
</clipPath>
<path fill="#fff" d="m-2205 1470a1785 1785 0 0 1 3570 0h-105a1680 1680 0 1 0 -3360 0z" clip-path="url(#band)"/>
<g transform="translate(-420,1470)" fill="#009b3a">
<use y="-1697.5" xlink:href="#O" transform="rotate(-7)"/>
<use y="-1697.5" xlink:href="#R" transform="rotate(-4)"/>
<use y="-1697.5" xlink:href="#D" transform="rotate(-1)"/>
<use y="-1697.5" xlink:href="#E" transform="rotate(2)"/>
<use y="-1697.5" xlink:href="#M" transform="rotate(5)"/>
<use y="-1697.5" xlink:href="#e" transform="rotate(9.75)"/>
<use y="-1697.5" xlink:href="#P" transform="rotate(14.5)"/>
<use y="-1697.5" xlink:href="#R" transform="rotate(17.5)"/>
<use y="-1697.5" xlink:href="#O" transform="rotate(20.5)"/>
<use y="-1697.5" xlink:href="#G" transform="rotate(23.5)"/>
<use y="-1697.5" xlink:href="#R" transform="rotate(26.5)"/>
<use y="-1697.5" xlink:href="#E" transform="rotate(29.5)"/>
<use y="-1697.5" xlink:href="#S" transform="rotate(32.5)"/>
<use y="-1697.5" xlink:href="#S" transform="rotate(35.5)"/>
<use y="-1697.5" xlink:href="#O" transform="rotate(38.5)"/>
</g>
<use id="&#x3B1;CMi" y="-132" x="-600" xlink:href="#star1"/>
<use id="&#x3B1;CMa" y="177" x="-535" xlink:href="#star1"/>
<use id="&#x3B2;CMa" y="243" x="-625" xlink:href="#star2"/>
<use id="&#x3B3;CMa" y="132" x="-463" xlink:href="#star4"/>
<use id="&#x3B4;CMa" y="250" x="-382" xlink:href="#star2"/>
<use id="&#x3B5;CMa" y="323" x="-404" xlink:href="#star3"/>
<use id="&#x3B1;Vir" y="-228" x="228" xlink:href="#star1"/>
<use id="&#x3B1;Sco" y="258" x="515" xlink:href="#star1"/>
<use id="&#x3B2;Sco" y="265" x="617" xlink:href="#star3"/>
<use id="&#x3B5;Sco" y="323" x="545" xlink:href="#star2"/>
<use id="&#x3B8;Sco" y="477" x="368" xlink:href="#star2"/>
<use id="&#x3B9;Sco" y="551" x="367" xlink:href="#star3"/>
<use id="&#x3BA;Sco" y="419" x="441" xlink:href="#star3"/>
<use id="&#x3BB;Sco" y="382" x="500" xlink:href="#star2"/>
<use id="&#x3BC;Sco" y="405" x="365" xlink:href="#star3"/>
<use id="&#x3B1;Hya" y="30" x="-280" xlink:href="#star2"/>
<use id="&#x3B3;Hya" y="-37" x="200" xlink:href="#star3"/>
<use id="&#x3B1;Cru" y="330" xlink:href="#star1"/>
<use id="&#x3B2;Cru" y="184" x="85" xlink:href="#star2"/>
<use id="&#x3B3;Cru" y="118" xlink:href="#star2"/>
<use id="&#x3B4;Cru" y="184" x="-74" xlink:href="#star3"/>
<use id="&#x3B5;Cru" y="235" x="-37" xlink:href="#star4"/>
<use id="&#x3B1;TrA" y="495" x="220" xlink:href="#star2"/>
<use id="&#x3B2;TrA" y="430" x="283" xlink:href="#star3"/>
<use id="&#x3B3;TrA" y="412" x="162" xlink:href="#star3"/>
<use id="&#x3B1;Car" y="390" x="-295" xlink:href="#star1"/>
<use id="&#x3C3;Oct" y="575" xlink:href="#star5"/>
</svg>

Stack trace:

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: FormatException: Invalid double
-50%
#0      double.parse (dart:core-patch/double_patch.dart:112:28)
#1      parseDouble (package:vector_graphics_compiler/src/svg/numbers.dart:32:17)
#2      parseDoubleWithUnits (package:vector_graphics_compiler/src/svg/numbers.dart:82:25)
#3      SvgParser.parseDoubleWithUnits (package:vector_graphics_compiler/src/svg/parser.dart:975:20)
#4      _Paths.rect (package:vector_graphics_compiler/src/svg/parser.dart:506:34)
#5      SvgParser.addShape (package:vector_graphics_compiler/src/svg/parser.dart:892:31)
#6      SvgParser.startElement (package:vector_graphics_compiler/src/svg/parser.dart:920:12)
#7      SvgParser._parseTree (package:vector_graphics_compiler/src/svg/parser.dart:766:13)
#8      SvgParser.parse (package:vector_graphics_compiler/src/svg/parser.dart:799:5)
#9      parse (package:vector_graphics_compiler/vector_graphics_compiler.dart:76:17)
#10     encodeSvg (package:vector_graphics_<…>
Judimax commented 3 months ago

I think the fix is simple grab the width and the height of the svg grab the percentage value and work with it that way?

Jyoshnarani commented 4 weeks ago

2.0.10

latest version has same error

Unhandled Exception: FormatException: Invalid double 100%

deminearchiver commented 1 week ago

I really want this fixed too!