iOS使用SVGKit 换肤(纯色和渐变色)

1.图层换颜色
效果：左边的图标(原图) - > 右边图标(更换颜色后)

image.png

svg源码：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="132px" height="132px" viewBox="0 0 132 132" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
    <title>round</title>
    <desc>Created with Sketch.</desc>
    <circle id="skinLayer" fill="#FF0000" opacity="0.5" cx="83" cy="85" r="39"></circle>
    <path d="M66,0 C29.5492065,0 0,29.5492065 0,66 C0,102.450793 29.5492065,132 66,132 C102.450793,132 132,102.450793 132,66 C132,29.5492065 102.450793,0 66,0 Z M66,10 C96.927946,10 122,35.072054 122,66 C122,96.927946 96.927946,122 66,122 C35.072054,122 10,96.927946 10,66 C10,35.072054 35.072054,10 66,10 Z" id="椭圆形" fill="#010101" fill-rule="nonzero"></path>
</svg>

在svg需要换颜色的图层加上特殊标识如：id="skinLayer"
使用 SVGKit 找到需要更换颜色的图层，修改即可，如下：

+ (UIImage *)svgNamed:(NSString *)svgNamed cgColor:(CGColorRef)cgColor{
    SVGKImage * svgImage = [SVGKImage imageNamed:svgNamed];
    
    CALayer * layer = [svgImage layerWithIdentifier:@"skinLayer"];
    if( [layer isKindOfClass:[CAShapeLayer class]]){
        CAShapeLayer* shapeLayer = (CAShapeLayer*)layer;
        shapeLayer.fillColor = cgColor;
    }
    
    SVGKLayeredImageView * icon = [[SVGKLayeredImageView alloc] initWithSVGKImage:svgImage];
    return icon.image.UIImage;
}

2.渐变图层换颜色
效果：下面的渐变图片(原图) -> 下边图片(更换颜色后)

image.png

svg源码：

image.png

和图层换色原理相通，定义好节点标识如：id="skin-gradient"，找到后替换即可。

声明：原创作品，未经允许，不得转发！