HarmonyOS 鸿蒙Next 图片svg的使用

发布于 1周前 作者 eggper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 图片svg的使用

想请问下HarmonyOS对于svg格式的图片支持，有官方的文档吗？ 目前在开发中，对于暗夜模式适配的处理，想使用svg格式图片，并在svg图片的代码中使用资源文件中的色值，这样图片可以根据系统的设置动态加载 暗夜 或 明亮的色值。但发现好像做不到，可以有相关的解决方案或文档参考吗？

Harmonyos Next教程
3 回复
鸿蒙的image组件支持svg格式的图片，

文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-graphics-display-V13

同时SVG的开发指导：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-svg-V13

image组件暂时修改不了SVG图片的stroke属性

更多关于HarmonyOS 鸿蒙Next 图片svg的使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


ColorFilter

在HarmonyOS鸿蒙Next系统中，使用SVG（可缩放矢量图形）图片能够带来丰富的图形显示效果，同时保持文件的小巧和图形的清晰度。要在鸿蒙应用中使用SVG图片，你可以遵循以下步骤：

  1. SVG资源准备：确保SVG文件已正确放置在应用的资源目录中，通常是resources/rawfile目录下。

  2. XML布局引用：在XML布局文件中，可以使用Image组件并设置其src属性指向SVG文件。例如：

    <Image
    ohos:id="$+id:my_svg_image"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:src="$rawfile:my_image"/>

    其中my_image是SVG文件的名称（不含扩展名）。

  3. 代码动态加载：在JavaScript代码中，可以通过Image组件的setSrc方法动态设置SVG图片。例如：

    let image = this.$element('my_svg_image');
image.setSrc('$rawfile:my_image');

  4. SVG特性支持：鸿蒙系统对SVG的某些复杂特性可能支持有限，使用时需确认兼容性。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部