HarmonyOS鸿蒙Next中svg图表无法显示

HarmonyOS鸿蒙Next中svg图表无法显示 管理后台上传的svg图表，在鸿蒙客户端压根不显示，这是啥情况啊？鸿蒙不支持渲染内联 SVG 字符串嘛？有没有什么办法可以解决啊？

9 回复

尊敬的开发者，您好，Image无法直接加载SVG字符串，您可以使用TextEncoder类的encodeInto方法，将SVG字符串转化为Uint8Array类型，然后使用createImageSource通过buffer创建ImageSource实例，最后使用createPixelMap返回结果。
示例代码如下：

import { image } from '@kit.ImageKit';
import { util } from '@kit.ArkTS';

@Entry
@Component
struct Index {
  @State pixelMap: image.PixelMap | undefined = undefined;
  // 将以下内容替换成从三方库得到的SVG字符串
  svgContent ='';

  async uint8ArrayToPixelMap(svg: string): Promise<image.PixelMap> {
    let encoder = new util.TextEncoder();
    const uint8Array = encoder.encodeInto(svg);
    const iconArray: ArrayBuffer = uint8Array.buffer.slice(0);
    let source = image.createImageSource(iconArray);
    const pixelMap = await source.createPixelMap();
    source.release();
    return pixelMap;
  }

  build() {
    Column() {
      Button('点击根据字符串加载SVG图片')
        .onClick(() => {
          this.uint8ArrayToPixelMap(this.svgContent).then((data: PixelMap) => {
            this.pixelMap = data;
          });
        })
        .margin({ top: 30, bottom: 30 })
      Image(this.pixelMap)
        .width('50%').height('50%')
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .margin({ top: 30, bottom: 30 })
    }
    .height('100%')
    .width('100%')
  }
}

详细可以参考：如何通过SVG字符串加载图片-行业常见问题-便捷生活类行业实践 - 华为HarmonyOS开发者

更多关于HarmonyOS鸿蒙Next中svg图表无法显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是的，用的时候已经发现了，鸿蒙的把文字拎出来自己写吧

鸿蒙的Image组件对SVG的支持是有限的，并且不能像Web那样直接使用内联SVG字符串

很喜欢HarmonyOS的卡片式设计，信息一目了然，操作也更便捷。

目前不支持显示字符串

很喜欢HarmonyOS的卡片式设计，信息一目了然，操作也更便捷。

+1，

鸿蒙Next中SVG图表无法显示通常因为：1. SVG文件未放在resources/media目录；2. 使用了命名的渐变、滤镜等非标准标签；3. Image组件的objectFit未正确配置；4. SVG包含复杂路径或大于512×512像素限制。确保文件UTF-8无BOM编码，且通过Image($r('app.media.xxx'))方式引用。

鸿蒙Next不支持直接解析渲染内联SVG字符串。可以将SVG转为文件资源或Base64数据后通过Image组件显示，也可用Web组件加载含SVG的HTML片段。

方案一：Image + Base64
将SVG字符串转Base64，设置为data URI图片源。

import util from '@ohos.util';
let base64 = new util.Base64Helper();
let base64Str = base64.encodeToString(new Uint8Array(buffer), 0); // buffer为SVG字符串的字节
Image('data:image/svg+xml;base64,' + base64Str)

方案二：Web组件渲染
使用Web组件的loadData方法直接嵌入SVG字符串。

@State svgString: string = '<svg>...</svg>';
Web({ src: '' })
  .onControllerAttached((controller: web_webview.WebviewController) => {
    controller.loadData(
      `<html><body>${this.svgString}</body></html>`,
      'text/html', 'UTF-8'
    );
  })

以上两种方式均可让SVG图表正常显示。

回到顶部