在 Swift 中以编程方式同时在同一 SVG 上应用 2 种不同的颜色

Question

如何在 Swift 中的代码中更改 SVG 的 2 种不同颜色？ SVG 图标由一个箭头和一个圆圈组成。我想将箭头的颜色与圆圈的颜色分开设置。我可以在 Swift 中完成吗？

通过使用此代码，我会将白色图标的色调设置为蓝色。

let palyImage = UIIImage(name: "play").withRenderingMode(.alwaysTemplate)
playImageView.image = playImage
playImageView.tintColor = .systemBlue

我怎样才能将另一种颜色应用到同一个图标上，使图标有两种不同的颜色？

我没有设法 google 关于如何在同一 SVG 中更改两种不同颜色的任何建议。那么如何为 SVG 图标添加另一种颜色呢？甚至有可能制作 SVG 是否有任何特殊方式（图层或其他东西）？设计师需要在 SVG 中插入一些特殊层吗？我自己从未创建过 SVG...

Answer 1

查看此库 Snowflake，它将 SVG 呈现为 UIView。

SVG 文件中的所有路径将被渲染为单个 CALayer，稍后可以在 UIView().layer.sublayers 中访问它们。

并且可以将颜色应用于与 SVG 源代码中找到的索引顺序相匹配的相应图层。

func load() {
    guard let path = Bundle.main.path(forResource: "fileName", ofType: "svg"),
          let data = try? Data(contentsOf: URL(fileURLWithPath: path)),
          let document = Document(data: data)
    else { return }
    // load SVG to a UIView
    svgView = document.svg.view(size: CGSize(width: 300, height: 300))
    // change path color
    (svgView.layer.sublayers as? [CAShapeLayer])?.enumerated().forEach { index, layer in
        layer.fillColor = index % 2 == 0 ? UIColor.green.cgColor : UIColor.red.cgColor
    }
    
    self.view.addSubview(svgView)
}

例如，

在 repo 的示例项目中，有一个名为“shape_pencils.svg”的图像，其预设颜色如左图所示。

然后可以通过下面的代码改成右边的


    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        (svgView.layer.sublayers as? [CAShapeLayer])?.enumerated().forEach { index, layer in
            layer.fillColor = index % 2 == 0 ? UIColor.green.cgColor : UIColor.red.cgColor
        }
        
    }

这是它的工作原理。对于每个 SVG 文件，如果您在文本编辑器中打开它，您将看到源代码，如下面显示“shape_pencils”的快照一样。它包含19条路径和线条，每条路径和线条都会被渲染为对应的CALayer。

然后你就可以按照在源代码中找到的索引顺序来匹配你的箭头和圆圈了。

其他流行的库也可能有效，因为它们也使用 UIView 及其 CALayer

在 Swift 中以编程方式同时在同一 SVG 上应用 2 种不同的颜色

Programatically apply 2 different colors on same SVG at the same time in Swift

icons

svg

ios

swift