flutter SVG图片在抖动中返回黑色图像,尽管从资产中给出了彩色图像

esyap4oy  于 2023-02-25  发布在  Flutter
关注(0)|答案(9)|浏览(303)

下面是我将要添加svgpicture的代码,但我得到的是黑色图像的新容器子:新的svg图片.资产(“资产/相机. svg”)),
这是我的camera.svg文件

<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608">
    <defs>
        <style>
            .cls-1{}
        </style>
    </defs>
    <g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
        <g id="Group_4" data-name="Group 4">
            <g id="Group_3" data-name="Group 3">
                <path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
            </g>
        </g>
    </g>
</svg>
wswtfjt7

wswtfjt71#

这可能是因为网络上的SVG文件损坏了,我之前遇到过这个问题,尝试过很多方法来解决,但是最后我还是在svgcleaner软件的帮助下解决了这个问题。
将应用程序从here下载到您的操作系统中
安装后,
1.导入SVG。

1.单击运行。

1.成功!在这里你可以看到你的SVG '清理成功。

清理后,您可以从输出文件夹位置获取这些SVG文件,并将这些文件添加到flutter应用中,而不会看到任何黑色SVG。
对我来说很好用。

ix0qys7i

ix0qys7i2#

flutter_svg无法理解Internal or Embedded CSS
因此,你需要删除内部css并编写内联css。
示例:-<path style="fill:#566e83;" ...

2hh7jdfx

2hh7jdfx3#

使用https://vecta.io/nano它可以删除不支持的标签,如,并在一定级别压缩svg文件

nwo49xxi

nwo49xxi4#

这是内联css的原因。

<style>
        .cls-1{}
    </style>

删除这几行并尝试...您的问题将得到解决... flutter svg无法读取内联CSS

wxclj1h5

wxclj1h55#

像下面这样编辑style以更改颜色:

<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608" style="fill: #ff0000;">
    <defs>
        <style>
            .cls-1{}
        </style>
    </defs>
    <g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
        <g id="Group_4" data-name="Group 4">
            <g id="Group_3" data-name="Group 3">
                <path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
            </g>
        </g>
    </g>
</svg>
oyt4ldly

oyt4ldly6#

第一次使用您提供的svg映像时,我在控制台上收到以下错误

I/扑动(7705):SVG捕获的异常情况I/flutter(7705):在parseSvgElement中引发了以下未实现的错误:I/扑动(7705):此库中未实现元素。
您可以删除映像上的此部分以解决此问题:
.分类-1 {}

其次,图像显示正确,只需验证您已在pubspec.yaml文件中添加了正确的资产注册,如下所示。

资产:-资产/摄像机. svg
这意味着在根级别有一个名为assets的文件夹。

第三个图像是不是相机图片就像一个人的图标。

按如下方式使用,您将看到:

Container(
        height: 120.0,
        width: 120.0,
        color: Colors.yellow,
        child: SvgPicture.asset('assets/camera.svg'),
      )

我把一个黄色的背景显示一个更好的结果。
希望这能有所帮助。

lstz6jyr

lstz6jyr7#

即使我在flutter中也遇到了这个问题,问题出在SVG文件上,我使用这个网站https://jakearchibald.github.io/svgomg/清理了SVG文件,然后它运行得很好。

q8l4jmvw

q8l4jmvw8#

没什么你必须做的伙计!只要打开SVG文件在您的android工作室。并删除样式属性从那里。

flvlnr44

flvlnr449#

请按照以下步骤解决此错误:
1.复制你的svg图片代码.
1.使用此工具将svg代码转换为内联CSS css-inliner
1.粘贴新的svg代码到现有的svg文件中
1.重新启动应用程序,这将解决您的问题。
这是因为flutter_svg包不会呈现svg代码的内部CSS。

相关问题