HarmonyOS鸿蒙Next中怎么修改svg格式的图片颜色

HarmonyOS鸿蒙Next中怎么修改svg格式的图片颜色

这张svg格式图片，有两个fill，使用fillColor，整个图片都变成了红色的了，应该fillColor把所有的fill颜色都替换成了红色，请问怎么精准的替换svg的fill颜色

```javascript
Image('app.media.alert_success').fillColor(Color.Red)  
.width('200')  
.height('200')  
.margin({top: LengthMetrics.px(10)})
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.2722 65.6213C57.1629 65.6213 71.6661 51.118 71.6661 33.2273C71.6661 15.3366 57.1629 0.833382 39.2722 0.833382C21.3815 0.833382 6.87826 15.3366 6.87826 33.2273C6.87826 51.118 21.3815 65.6213 39.2722 65.6213Z" stroke="#222223" stroke-width="0.666667"/>
<path d="M65.4545 38.6819C65.4545 56.7567 50.8021 71.4092 32.7273 71.4092C14.6525 71.4092 0 56.7567 0 38.6819C0 20.6071 14.6525 5.95464 32.7273 5.95464C50.8021 5.95464 65.4545 20.6071 65.4545 38.6819Z" fill="#84BD00"/>
<path d="M45.9742 31.456L29.5862 48.1168C29.4434 48.2624 29.2738 48.3779 29.0871 48.4568C28.9003 48.5356 28.7001 48.5762 28.4979 48.5762C28.2957 48.5762 28.0955 48.5356 27.9087 48.4568C27.722 48.3779 27.5523 48.2624 27.4096 48.1168L20.2398 40.8277C20.0969 40.6824 19.9836 40.5099 19.9062 40.3201C19.8289 40.1303 19.7891 39.9268 19.7891 39.7213C19.7891 39.5158 19.8289 39.3124 19.9062 39.1226C19.9836 38.9327 20.0969 38.7602 20.2398 38.6149C20.3828 38.4697 20.5524 38.3544 20.7391 38.2758C20.9259 38.1971 21.126 38.1567 21.3281 38.1567C21.5302 38.1567 21.7303 38.1971 21.9171 38.2758C22.1038 38.3544 22.2735 38.4697 22.4164 38.6149L28.4992 44.7989L43.8002 29.2459C44.0889 28.9524 44.4803 28.7876 44.8885 28.7876C45.2967 28.7876 45.6881 28.9524 45.9768 29.2459C46.2654 29.5393 46.4275 29.9373 46.4275 30.3523C46.4275 30.7672 46.2654 31.1652 45.9768 31.4586L45.9742 31.456Z" fill="white"/>
</svg>

更多关于HarmonyOS鸿蒙Next中怎么修改svg格式的图片颜色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复 
您好，`fillColor`属性设置后会替换SVG图片中所有可绘制元素的填充颜色。

如果您想替换某一个颜色以达到这样的效果，建议您手动改下；

[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-image-V13#fillcolor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-image-V13#fillcolor)

![cke_1826.png](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/595/608/248/0030086000595608248.20241205213556.51552618106169798124346012231042:50001231000000:2800:5B8D5C0E7F4EC39A9080BA1031D28C934FC0C5F7740B4D65CAD614E9520D7E1F.png)

更多关于HarmonyOS鸿蒙Next中怎么修改svg格式的图片颜色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


那代码层面能修改svg文件吗

fillColor属性 设置后会替换svg图片中所有可绘制元素的填充颜色
不太适合您的场景；后续看该接口是否能定义修改某一个元素的填充颜色，

在HarmonyOS鸿蒙Next中修改SVG格式图片的颜色，可以通过以下步骤实现：

  1. 解析SVG文件：使用鸿蒙系统提供的XmlPullParser或SAX解析器解析SVG文件，获取其XML结构。

  2. 定位颜色属性：在解析后的XML结构中，查找需要修改的颜色属性，如fill、stroke等。

  3. 修改颜色值：将找到的颜色属性值替换为目标颜色值。可以使用十六进制颜色码、RGB值或HSL值。

  4. 重新生成SVG：将修改后的XML结构重新生成SVG文件。

  5. 应用修改后的SVG：将生成的SVG文件应用到鸿蒙系统的UI组件中，如Image组件。

示例代码片段如下：

import ohos.utils.xml.XmlPullParser;
import ohos.utils.xml.XmlSerializer;

// 解析SVG文件
XmlPullParser parser = Xml.newPullParser();
parser.setInput(new StringReader(svgContent));

// 遍历XML节点
while (parser.next() != XmlPullParser.END_DOCUMENT) {
    if (parser.getEventType() == XmlPullParser.START_TAG) {
        String tagName = parser.getName();
        if (tagName.equals("path") || tagName.equals("circle")) {
            // 修改颜色属性
            String fillColor = parser.getAttributeValue(null, "fill");
            if (fillColor != null) {
                parser.setAttribute(null, "fill", "#FF0000"); // 替换为红色
            }
        }
    }
}

// 重新生成SVG
XmlSerializer serializer = Xml.newSerializer();
StringWriter writer = new StringWriter();
serializer.setOutput(writer);
serializer.startDocument("UTF-8", true);
// 将修改后的XML结构写入serializer
serializer.endDocument();
String modifiedSvg = writer.toString();

// 应用修改后的SVG
Image image = new Image(context);
image.setSVG(modifiedSvg);

通过以上步骤，你可以在HarmonyOS鸿蒙Next中修改SVG格式图片的颜色。

在HarmonyOS（鸿蒙）Next中，修改SVG图片颜色可以通过以下步骤实现：

  1. 解析SVG文件：使用XmlPullParser或Svg库解析SVG文件，获取其XML结构。
  2. 修改颜色属性：在SVG的XML结构中，找到需要修改的fill或stroke属性，将其值更改为目标颜色（如#FF0000表示红色）。
  3. 重新渲染SVG：将修改后的XML结构重新渲染为SVG图片。
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

// 示例代码
Document document = new SAXReader().read(new File("path/to/svg"));
Element element = document.getRootElement().element("path");
element.addAttribute("fill", "#FF0000");
// 保存或渲染修改后的SVG

通过这种方式，可以动态修改SVG图片的颜色。

回到顶部