SwiftUI旅行APP：如何通过代码修改SVG指定国家颜色？

你之前的问题在于直接将SVG转换成了UIImage位图，这导致无法修改单个国家的路径样式。要实现需求，需要保留SVG的矢量结构，通过SVGKit操作底层的图层元素，具体步骤如下：

1. 实现交互式SVG地图的UIViewRepresentable #

创建一个UIViewRepresentable包装器，用来加载SVG并操作内部图层：

import SwiftUI
import SVGKit

struct InteractiveWorldMap: UIViewRepresentable {
    var visitedCountries: [String]
    
    func makeUIView(context: Context) -> UIView {
        let containerView = UIView()
        
        // 加载本地SVG文件
        guard let svgFileURL = Bundle.main.url(forResource: "world", withExtension: "svg"),
              let svgDocument = SVGKSourceSVG(sourceURL: svgFileURL).parseSVG() else {
            return containerView
        }
        
        // 创建SVG矢量图层
        let svgLayer = SVGKLayer(svg: svgDocument)
        svgLayer.frame = containerView.bounds
        svgLayer.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        containerView.layer.addSublayer(svgLayer)
        
        // 初始化已访问国家的颜色
        updateCountryColors(layer: svgLayer, visitedCodes: visitedCountries)
        
        return containerView
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        guard let svgLayer = uiView.layer.sublayers?.first as? SVGKLayer else { return }
        updateCountryColors(layer: svgLayer, visitedCodes: visitedCountries)
    }
    
    // 更新国家填充色的核心方法
    private func updateCountryColors(layer: CALayer, visitedCodes: [String]) {
        // 先重置所有国家的默认样式（白色填充+黑色边框）
        resetAllCountryLayers(layer: layer)
        
        // 给已访问国家设置蓝色填充
        for code in visitedCodes {
            findLayer(withName: code, in: layer)?.fillColor = UIColor.blue.cgColor
        }
    }
    
    // 递归重置所有国家图层的样式
    private func resetAllCountryLayers(layer: CALayer) {
        for sublayer in layer.sublayers ?? [] {
            // 只处理带国家代码ID的图层
            if sublayer.name != nil {
                sublayer.fillColor = UIColor.white.cgColor
                sublayer.strokeColor = UIColor.black.cgColor
            }
            resetAllCountryLayers(layer: sublayer)
        }
    }
    
    // 递归查找对应国家代码的图层
    private func findLayer(withName name: String, in layer: CALayer) -> CALayer? {
        if layer.name == name {
            return layer
        }
        for sublayer in layer.sublayers ?? [] {
            if let targetLayer = findLayer(withName: name, in: sublayer) {
                return targetLayer
            }
        }
        return nil
    }
}

2. 在SwiftUI视图中使用交互式地图 #

绑定已访问国家数组，动态更新地图样式：

struct ContentView: View {
    // 维护已访问国家的代码数组（示例初始值）
    @State private var visitedCountries: [String] = ["AD", "CN"]
    
    var body: some View {
        VStack(spacing: 20) {
            InteractiveWorldMap(visitedCountries: visitedCountries)
                .frame(width: UIScreen.main.bounds.width * 0.85, height: 400)
                .padding(.top)
            
            // 示例操作按钮：添加/移除国家
            HStack {
                Button("添加日本") {
                    if !visitedCountries.contains("JP") {
                        visitedCountries.append("JP")
                    }
                }
                
                Button("移除安道尔") {
                    visitedCountries.removeAll { $0 == "AD" }
                }
            }
        }
    }
}

关键说明 #

• SVG中的<path>元素ID必须与国家代码完全匹配（如安道尔的id="AD"），否则无法找到对应图层
• 采用递归遍历图层的方式，适配SVG可能存在的嵌套结构
• updateUIView会在visitedCountries数组变化时自动触发，更新地图样式

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