Android Jetpack Compose中如何动态修改SVG路径填充色？

需求说明 #

需要在Jetpack Compose应用中展示世界地图SVG，实现动态修改指定国家路径填充色的功能——SVG中每个国家对应带两位代码ID的path元素（如id="us"代表美国、id="ca"代表加拿大）。手动在SVG的style标签中添加.us {fill: blue}可修改颜色，但无法在运行时通过代码实现动态调整。

SVG示例结构：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2754" height="1398">
    <title>World Map</title>
    <style id="style_css_sheet" type="text/css">
        ...原有CSS样式...
    </style>
    <path id="us" class="landxx sd" d="..."></path>
    <path id="ca" ...></path>
</svg>

已尝试的无效方案 #

• 修改SVG文件内容后用Coil的rememberAsyncImagePainter加载：图片无法自动刷新，且文件读写效率低下

  val imageLoader = ImageLoader.Builder(context)
          .components {
              add(SvgDecoder.Factory())
          }
          .build()
  
  Image(
          painter = rememberAsyncImagePainter(File(context.filesDir, "worldmap_filled.svg"), imageLoader),
          contentDescription = "World Map",
          modifier = Modifier.sizeIn(maxHeight = 800.dp)
      )
  

• 转换为VectorDrawable：无法正常显示Drawable对象，也无法修改填充样式
• 在线工具转为Compose代码：丢失国家ID信息，无法针对单个国家操作
• HTML包裹SVG渲染：实现流程过于繁琐
• 拆分SVG为单个国家文件叠加：开发成本过高

期望的理想实现 #

希望能直接操作SVG对象并应用样式，类似以下伪代码：

val svgObject = readSvg("example.svg")
svgObject.applyStyle(".us, .ca, .fr {fill: blue} ")
Image(svgObject, ...)

可行解决方案：使用AndroidSvg库解析并动态修改SVG #

1. 添加依赖 #

在Module级别的build.gradle中引入AndroidSvg库：

implementation 'com.caverock:androidsvg:1.4'

2. 解析并修改SVG样式 #

通过AndroidSvg的SVG类加载资源文件，动态追加自定义CSS样式，再转换为Compose可用的BitmapPainter：

import android.content.Context
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.graphics.painter.BitmapPainter
import com.caverock.androidsvg.SVG
import com.caverock.androidsvg.SVGParseException
import java.io.InputStream

fun loadStyledWorldMap(
    context: Context,
    countryColorMap: Map<String, String> // 键：国家ID，值：填充色（如"us" to "#0000FF"）
): BitmapPainter? {
    return try {
        // 从assets读取SVG文件（示例路径：assets/maps/world.svg）
        val inputStream = context.assets.open("maps/world.svg")
        val svg = SVG.getFromInputStream(inputStream)

        // 构建自定义CSS样式
        val customStyles = countryColorMap.entries.joinToString("\n") { (id, color) ->
            "#$id { fill: $color; }"
        }

        // 合并原有样式与自定义样式
        val existingCss = svg.documentStyleSheet?.cssText ?: ""
        svg.setDocumentStyleSheet(existingCss + "\n" + customStyles)

        // 将SVG渲染为Bitmap，再转为Compose的BitmapPainter
        val bitmap = svg.renderToBitmap(
            svg.documentWidth.toInt(),
            svg.documentHeight.toInt()
        )
        BitmapPainter(bitmap.asImageBitmap())
    } catch (e: SVGParseException) {
        e.printStackTrace()
        null
    }
}

3. 在Compose中使用 #

静态样式示例

@Composable
fun StaticWorldMap(context: Context) {
    val countryColors = mapOf(
        "us" to "#0000FF",
        "ca" to "#FF0000",
        "fr" to "#00FF00"
    )

    val mapPainter = remember {
        loadStyledWorldMap(context, countryColors)
    }

    mapPainter?.let {
        Image(
            painter = it,
            contentDescription = "World Map",
            modifier = Modifier.sizeIn(maxHeight = 800.dp)
        )
    }
}

动态样式示例（支持交互修改）

@Composable
fun DynamicWorldMap(context: Context) {
    // 用mutableStateMap保存颜色，修改时自动触发重组
    val countryColors = remember { mutableStateMapOf("us" to "#0000FF") }

    // 颜色变化时重新生成Painter
    val mapPainter = remember(countryColors.toMap()) {
        loadStyledWorldMap(context, countryColors.toMap())
    }

    Column {
        mapPainter?.let {
            Image(
                painter = it,
                contentDescription = "World Map",
                modifier = Modifier.sizeIn(maxHeight = 800.dp)
            )
        }

        Button(onClick = {
            // 点击按钮修改美国的填充色
            countryColors["us"] = "#FFFF00"
        }) {
            Text("修改美国颜色")
        }
    }
}

方案优势 #

• 直接操作SVG样式表，无需修改原始文件，性能高效
• 保留国家ID关联，可精准控制单个国家的颜色
• 实现成本低，无需复杂的文件拆分或格式转换

内容的提问来源于stack exchange，提问作者Paul