Figma SVG 未使用 flutter_svg 进行解析

Question

我创建了一堆我想在我的 flutter 应用程序中使用的矢量图形，但似乎无法使用 flutter_svg.

从 Figma 加载任何 SVG

这是我收到的错误

The following assertion was thrown while parsing AssetBundlePictureKey(bundle: PlatformAssetBundle#e7c1f(), name: "assets/images/question-btn.svg", colorFilter: null, theme: SvgTheme(currentColor: null, fontSize: 14.0, xHeight: 7.0)) in _getDefinitionPaint:
Failed to find definition for url(#Group 1__d)

This library only supports <defs> and xlink:href references that are defined ahead of their references.

我理解这个问题及其发生的原因，但是有没有办法将 figma 中的组件导出到 svg 中，以便在 flutter 中工作。

Answer 1

从错误消息看来，您的 SVG 有 id 个包含空格的属性。

url(#Group 1__d)

# 之后的部分必须是另一个元素的 id。但是 id 值中不能有空格。

我希望 Figma 在导出 SVG 时能够优雅地处理这个问题。但也许不是。

尝试编辑您的 Figma 文件并从图层名称中删除空格。例如，将 Group 1__d 更改为 Group_1__d 或 Group1d 等

Figma SVG 未使用 flutter_svg 进行解析

Figma SVG not parsing with flutter_svg

svg

vector

flutter

figma