Question

这是我要添加svgpicture但我得到黑色图像的代码新货柜子级：new SvgPicture.asset（'assets / camera.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>

Answer 1

flutter_svg无法理解Internal or Embedded CSS。

因此，您需要删除内部CSS并编写内联CSS。

示例：- <path style="fill:#566e83;" ...

Answer 2

这可能是由于来自互联网的SVG文件损坏而发生的。我较早就遇到了这个问题，并尝试了多种方法来解决它。但是最后，我借助svgcleaner这个软件解决了这个问题。

从here

将应用程序下载到您的操作系统中

安装后，

导入您的SVG。

单击运行。

成功！在这里，您可以看到SVG已成功清除。

清洁后，您可以从输出文件夹位置抓取这些SVG文件，并将这些文件添加到您的flutter应用程序中，而不会看到任何黑色的SVG。

对我来说很好用。

Answer 3

使用https://vecta.io/nano 它可以去除不支持的标签，例如在一定程度上压缩 svg 文件

Answer 4

像下面一样编辑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>

Answer 5

首先使用您提供的 svg 图像在控制台上出现以下错误

I / flutter（7705）：BY SVG排除异常 ╞═════════════════════════════════════════════════ ══════════════════════ I / flutter（7705）：引发了以下UnimplementedError parseSvgElement：I / flutter（7705）：该元素不是在此库中实现。

您可以删除图像上的此部分以解决该问题：

.cls-1 {}

第二，该图像显示正确，只需验证您已在 pubspec.yaml 文件上添加了正确的资产注册，如下所示。

资产： -资产/camera.svg

这意味着您在根目录下有一个名为资产的文件夹。

第三，图像不是，相机图片就像人物图标一样。
如下使用，您将看到：

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

我将黄色背景显示为更好的结果。
希望有帮助。

Answer 6

这是内联css .....

的原因

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

删除此行，然后尝试...您的问题将得到解决... flutter svg无法读取内联CSS

Answer 7

你什么都不用做，伙计！只需在您的 android studio 中打开该 svg 文件即可。并从那里删除样式属性。

SVG图片尽管抖动仍会提供彩色图像，但仍会抖动返回黑色图像

7 个答案: