HarmonyOS鸿蒙Next中如何加载svg文件？

HarmonyOS鸿蒙Next中如何加载svg文件？ 鸿蒙里如何加载svg文件？

3 回复

参考demo:

@Entry
@Component
struct ImageExample1 {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row() {
          // 加载png格式图片
          Image($r('app.media.ic_camera_master_ai_leaf'))
            .width(110).height(110).margin(15)
            .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          // 加载gif格式图片
          Image($r('app.media.loading'))
            .width(110).height(110).margin(15)
            .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
        Row() {
          // 加载svg格式图片
          Image($r('app.media.ic_camera_master_ai_clouded'))
            .width(110).height(110).margin(15)
            .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          // 加载jpg格式图片
          Image($r('app.media.ic_public_favor_filled'))
            .width(110).height(110).margin(15)
            .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
      }
    }.height(320).width(360).padding({ right: 10, top: 10 })
  }
}

更多关于HarmonyOS鸿蒙Next中如何加载svg文件？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中加载SVG文件，可以通过使用ohos.agp.components.Image组件和ohos.agp.utils.LayoutAlignment来实现。首先，确保SVG文件位于应用的resources/base/media/目录下。然后，在布局文件中使用Image组件，并通过src属性指定SVG文件的路径。例如：

<Image
    ohos:id="$+id:svg_image"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:image_src="$media:your_svg_file"
    ohos:layout_alignment="center"/>

在代码中，可以使用ResourceManager获取SVG资源的引用，并将其设置到Image组件中：

import image from '@ohos.agp.components';
import resourceManager from '@ohos.resourceManager';

let svgImage = findComponentById<image.Image>(this, 'svg_image');
let resourceMgr = resourceManager.getResourceManager();
let svgResource = resourceMgr.getMediaContent('$media:your_svg_file');
svgImage.imageSrc = svgResource;

通过这种方式，可以在鸿蒙Next中加载并显示SVG文件。

在HarmonyOS鸿蒙Next中，加载SVG文件可以使用SvgImage组件。首先，确保SVG文件放置在resources/base/media目录下。然后，在布局文件中通过SvgImage组件引用SVG文件：

<SvgImage
    ohos:id="$+id:svg_image"
    ohos:width="200vp"
    ohos:height="200vp"
    ohos:svg_src="$media:your_svg_file"
/>

在代码中，可以通过SvgImage的setSvgSource方法动态设置SVG资源：

SvgImage svgImage = (SvgImage) findComponentById(ResourceTable.Id_svg_image);
svgImage.setSvgSource(ResourceTable.Media_your_svg_file);

确保SVG文件兼容性，并根据需要调整尺寸和样式。

回到顶部