SVG-изображение возвращает чёрное изображение во флаттере, несмотря на то, что оно дает цветное изображение из оценки

Question

вот код, в который я собираюсь добавить svgpicture, но получаю черное изображение, новый дочерний контейнер: new SvgPicture.asset ('assets / camera.svg')),

это моя камера.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

Сначала с использованием предоставленного вами изображения svg Я получаю следующее сообщение об ошибке на консоли

I / флаттер (7705): ИСКЛЮЧЕНИЕ, ЗАПИСАННОЕ SVG ╞═════════════════════════════════════════════════ ══════════════════════ I / flutter (7705): следующая ошибка UnimplementedError parseSvgElement: I / flutter (7705): элемент не является реализовано в этой библиотеке.

Вы можете удалить этот раздел на изображении, чтобы решить эту проблему:

.cls-1 {}

Второй , изображение отображается правильно, просто убедитесь, что вы добавили правильную регистрацию активов в файл pubspec.yaml , как показано ниже.

активы: - assets / camera.svg

Это означает, что у вас есть папка под названием assets на корневом уровне.

Третий изображение , а не изображение с камеры подобно значку человека.
Используйте как следует, и вы увидите:

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

Я поставил желтый цвет фона, чтобы показать лучший результат.
Надеюсь, что это поможет.

Answer 2

Отредактируйте 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>