HarmonyOS鸿蒙Next应用如何加载SVG内容字符串显示图标？

HarmonyOS鸿蒙Next应用如何加载SVG内容字符串显示图标？ 鸿蒙应用加载SVG文件显示图标是没问题的，但是目前业务场景中，SVG文件内容是通过服务器下发，拿到的字符串。请问如何将SVG内容字符串，加载显示出来图片?

@Entry
@Component
struct SvgIconExample {
  build() {
    Column({ space: 50 }) {
      // 假设 svg 文件名为 icon.svg
      Image($r('media.icon')) 
        .width(100)
        .height(100)
    }
    .width('100%')
    .padding({ top: 50 })
  }
}

更多关于HarmonyOS鸿蒙Next应用如何加载SVG内容字符串显示图标？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

可以使用三方库ohos-svg, 地址：https://gitee.com/openharmony-sig/ohos_svg

参考demo：

//Index
import { SVGImageView } from '@ohos/svg'

@Entry
@Component
struct Index {
  svgStr: string =
    "<svg id=\"vector\" xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\"><defs><linearGradient gradientUnits=\"userSpaceOnUse\" x1=\"6.935\" y1=\"3.252\" x2=\"6.909\" y2=\"10.552\" id=\"gradient_0\"><stop offset=\"0\" stop-color=\"#FFFE4144\"/><stop offset=\"1\" stop-color=\"#FFFF6D67\"/></linearGradient></defs><path fill=\"url(#gradient_0)\" d=\"M10.983,3.951C10.983,3.313 10.461,2.79 9.823,2.79C5.983,2.79 2.862,5.913 2.862,9.755C2.862,10.393 3.384,10.915 4.022,10.915C4.66,10.915 5.182,10.393 5.182,9.755C5.182,7.189 7.259,5.112 9.823,5.112C10.461,5.112 10.983,4.589 10.983,3.951Z\" stroke-width=\"1\" fill-rule=\"evenodd\" stroke=\"#00000000\" id=\"path_6\"/></svg>"
  model: SVGImageView.SVGImageViewModel = new SVGImageView.SVGImageViewModel();

  aboutToAppear(): void {
    this.model.setFromString(this.svgStr)
  }

  build() {
    Column() {
      SVGImageView({ model: this.model })
        .width(50)
        .height(100)
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next应用如何加载SVG内容字符串显示图标？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


开发者您好，可以尝试通过Web组件加载svg字符串，具体参考以下代码：

@Entry
@Component
struct WebComponentExample {
  private svgString: string = `
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" stroke="green" fill="yellow"/>
    </svg>
  `;

  build() {
    Column() {
      Web({
        src: `data:text/html,
          <html>
            <body>${this.svgString}</body>
          </html>`,
        controller: new WebController
      })
        .width(200)
        .height(200)
    }
  }
}

祝您开发顺利！

在HarmonyOS鸿蒙Next中，加载SVG内容字符串并显示图标可以通过使用SvgImage组件实现。首先，确保SVG内容字符串是有效的XML格式。然后，使用SvgImage组件的src属性来加载SVG内容。以下是一个简单的示例代码：

import { SvgImage } from '@ohos/svg';

const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="blue"/>
</svg>`;

@Entry
@Component
struct SvgExample {
  build() {
    Column() {
      SvgImage({ src: svgContent })
        .width(100)
        .height(100)
    }
  }
}

在这段代码中，svgContent变量包含了SVG的XML字符串，SvgImage组件通过src属性加载并显示该SVG图标。通过调整width和height属性，可以控制图标的大小。

在HarmonyOS鸿蒙Next应用中加载SVG内容字符串显示图标，可以通过SvgImage组件实现。首先，确保将SVG内容字符串存储在资源文件或直接作为字符串变量。然后，使用SvgImage的source属性加载SVG字符串。例如：

import { SvgImage } from '@ohos/svg';

const svgString = '<svg ...>...</svg>'; // SVG内容字符串
<SvgImage source={{data: svgString, type: 'string'}} />

确保SVG字符串格式正确，并处理可能的编码或解析问题。

回到顶部