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

【问题标题】：Programatically apply 2 different colors on same SVG at the same time in Swift在 Swift 中以编程方式同时在同一个 SVG 上应用 2 种不同的颜色
【发布时间】：2021-10-12 16:36:23
【问题描述】：

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

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

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

如何将另一种颜色应用到同一个图标，使该图标具有两种不同的颜色？

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

【问题讨论】：

也许可以在 iOS 15 中试用 SF 符号：stackoverflow.com/a/68697066/14351818
谢谢，我观看了关于 SFSymbols 的 WWDC 21，但据我所知，您可以创建一个包含 2 种颜色的 SVG 图标，但您不能在运行时更改它的颜色。当您关闭颜色时，它们会被设置。或者至少我无法理解如何从代码中更改它们。此外，仅 iOS 15 支持多色符号 :(
您可以在运行时更改它！我在我的回答中展示了如何。但是，是的，它是 iOS 15+...
你几天前已经问过同样的问题了，不是吗？是什么阻止您编辑原始问题？
我确实编辑了这个问题，但它仍然关闭，所以没有人能够回答它。于是我把旧的删了，又开了一个新的。

标签： ios swift svg icons

【解决方案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

【讨论】：