Программно применить 2 разных цвета к одному и тому же SVG одновременно в Swift

avatar
SimpleApp
8 августа 2021 в 20:05
418
1
1

Как я могу изменить 2 разных цвета SVG в коде в Swift? Значок SVG состоит из стрелки и круга. Я хотел бы установить цвет стрелки отдельно от цвета круга. Могу ли я сделать это в Swift?

Используя этот код, я бы установил синий оттенок значка колеса.

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

Как применить другой цвет к одному и тому же значку, чтобы значок был двух разных цветов?

Мне не удалось найти в Google какие-либо советы о том, как изменить два разных цвета в одном и том же SVG. Итак, как я могу добавить другой цвет к значку SVG? Возможно ли это? Также есть ли какой-то особый способ создания SVG (слои или что-то в этом роде)? Есть ли какие-то специальные слои, которые дизайнер должен вставить в SVG? Я никогда не создавал SVG сам...

Источник
aheze
8 августа 2021 в 20:12
0

Возможно, попробуйте символы SF в iOS 15: coderhelper.com/a/68697066/14351818

SimpleApp
8 августа 2021 в 20:17
0

Спасибо, я смотрел WWDC 21 относительно SFSymbols, но, насколько я понял, вы можете создать значок SVG, содержащий 2 цвета, но вы не можете изменить его цвета во время выполнения. Когда вы закрываете цвета, они устанавливаются. Или, по крайней мере, я не понял, как их изменить из кода. Также многоцветные символы поддерживаются только в iOS 15 :(

aheze
8 августа 2021 в 20:18
0

Вы можете изменить его во время выполнения! Я показал, как в моем ответе. Но да, это iOS 15+...

El Tomato
8 августа 2021 в 20:46
0

Вы уже задавали тот же вопрос несколько дней назад, не так ли? Что мешает вам отредактировать исходный вопрос?

SimpleApp
11 августа 2021 в 14:50
0

Я отредактировал вопрос, но он остался закрытым, поэтому никто не смог на него ответить. Поэтому я удалил старый и открыл новый.

Ответы (1)

avatar
JsW
9 августа 2021 в 00:37
0

Проверьте эту библиотеку 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)
}

Например,

В примере проекта репозитория есть изображение с именем "shape_pencils.svg" с предустановленным цветом, показанным слева.

enter image description here Затем его можно изменить на правильный с помощью следующего кода. 


    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.

enter code here

Затем вы можете сопоставить стрелку и кружок с порядком индексов, найденным в исходном коде. enter image description here

Другие популярные библиотеки также могут работать, поскольку они также используют UIView и его CALayer