flutter_svg
flutter_svg copied to clipboard
[WEB] The SVG image is displayed entirely in black instead of showing only the outlined path
[WEB] The SVG image is displayed entirely in black instead of showing only the outlined path
- Flutter SVG 2.0.9
- Dart SDK version: 3.2.0 (stable)
- flutter: 3.16.0
Here is the .svg image (in Chrome/Edge):
The image is displayed entirely in black in the flutter_svg package:
The .svg file content:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#231F20;stroke-width:12.8598;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<g>
<g>
<path class="st0" d="M409.9,249.5V120.9c0-7.1-5.8-12.9-12.9-12.9H114.1c-7.1,0-12.9,5.8-12.9,12.9v128.6H409.9z"/>
<rect x="69.1" y="365.2" class="st0" width="25.7" height="38.6"/>
<rect x="416.3" y="365.2" class="st0" width="25.7" height="38.6"/>
</g>
<path class="st0" d="M307,236.6c0,7.1-5.8,12.9-12.9,12.9H217c-7.1,0-12.9-5.8-12.9-12.9v-51.4c0-7.1,5.8-12.9,12.9-12.9h77.2
c7.1,0,12.9,5.8,12.9,12.9V236.6z"/>
<line class="st0" x1="56.3" y1="339.5" x2="454.9" y2="339.5"/>
</g>
<rect x="56.3" y="281.6" class="st0" width="398.7" height="83.6"/>
<path class="st0" d="M442.1,281.6v-19.3c0-7.1-5.8-12.9-12.9-12.9H82c-7.1,0-12.9,5.8-12.9,12.9v19.3H442.1z"/>
</g>
</svg>
If I remove the fill="none" from element id=".st0", then I get the same thing in Chrome as I see in Flutter. So, I guess flutter_svg ignoring fill="none" somehow.
Estou com mesmo problema
The style tag isn't supported.
If you used illustrator to export this, when you export to an svg, the dialog box that shows has a dropdown that lets you select "Inline Attributes", if this option is used the resulting svg will work with the flutter_svg package.