1.圖層換顏色
效果：左邊的圖標(biāo)(原圖) - > 右邊圖標(biāo)(更換顏色后)

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需要換顏色的圖層加上特殊標(biāo)識如：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

和圖層換色原理相通，定義好節(jié)點標(biāo)識如：id="skin-gradient"，找到后替換即可。

聲明：原創(chuàng)作品，未經(jīng)允許，不得轉(zhuǎn)發(fā)！