如何从 SVG 字符串预缓存 SVG 图像？

Question

我已经在使用 flutter_svg 库中的 precachePicture 函数来加载 svg 资源：

Future<void> loadPictures() async {
  await precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/graphic/two_people.svg'),
    context,
  ); 
}

但是我有一些原始 svg 字符串（比这个更复杂）也需要预缓存

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><polygon points="120 8.9 147.31 93.45 236.99 93.45 164.41 146.38 191.77 231.09 120 178.76 48.23 231.09 75.59 146.37 3.01 93.45 92.69 93.45 120 8.9" fill="#f8d64e"/></svg>

如何从 SVG 字符串预缓存 SVG 图像？

Answer 1

所以，我终于找到了解决方案：

svgString = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><polygon points="120 8.9 147.31 93.45 236.99 93.45 164.41 146.38 191.77 231.09 120 178.76 48.23 231.09 75.59 146.37 3.01 93.45 92.69 93.45 120 8.9" fill="#f8d64e"/></svg>';

Future<void> loadSvgPictureFromSvgString() async {
  await precachePicture(
            StringPicture(SvgPicture.svgStringDecoder, svgString), context); //context or null
}
  

现在，当您调用 SvgPicture.string(svgString) 时，图像已经被预缓存，因此如果 svgString 有点复杂，则不会延迟渲染。