support stroke in pattern.

support stroke="url(#pattern)"
2025-12-20 14:05:09 +00:00 · 2016-04-22 19:04:07 +08:00
parent bfcc39f73e
commit 74b5e82781
20 changed files with 456 additions and 369 deletions
--- a/Example/examples/Gradients.js
+++ b/Example/examples/Gradients.js
@@ -185,7 +185,7 @@ class FillGradientWithOpacity extends Component{
 }

 class FillGradientInRect extends Component{
-    static title = 'Fill a radial gradient inside a rect';
+    static title = 'Fill a radial gradient inside a rect and stroke it';
    render() {
        return <Svg
            height="150"
@@ -205,7 +205,7 @@ class FillGradientInRect extends Component{
                    />
                </RadialGradient>
            </Defs>
-            <Rect x="0" y="0" width="300" height="150" fill="url(#grad)" />
+            <Rect x="5" y="5" width="290" height="130" fill="url(#grad)" stroke="pink" strokeWidth="5" />
        </Svg>;
    }
 }
--- a/Example/examples/Rect.js
+++ b/Example/examples/Rect.js
@@ -21,6 +21,7 @@ class RectExample extends Component{
                fill="rgb(0,0,255)"
                strokeWidth="3"
                stroke="rgb(0,0,0)"
+                strokeDasharray="5,10"
            />
        </Svg>;
    }
@@ -39,10 +40,10 @@ class RectStrokeFill extends Component{
                width="75"
                height="75"
                fill="blue"
-                fillOpacity="0.1"
-                stroke="pink"
+                fillOpacity="0.5"
+                stroke="red"
                strokeWidth="5"
-                strokeOpacity="0.9"
+                strokeOpacity="0.5"
            />
        </Svg>;
    }
--- a/Example/examples/Stroking.js
+++ b/Example/examples/Stroking.js
@@ -4,7 +4,12 @@ import React, {

 import Svg, {
    Path,
-    G
+    Rect,
+    G,
+    Defs,
+    Stop,
+    RadialGradient,
+    Polyline
 } from 'react-native-svg';

 class StrokeExample extends Component{
@@ -59,6 +64,48 @@ class StrokeDasharray  extends Component{
    }
 }

+class StrokePattern  extends Component{
+    static title = 'Stroke with gradient.';
+    render() {
+        return <Svg height="80" width="200">
+            <Defs>
+                <RadialGradient id="grad" cx="50%" cy="50%" rx="80%" ry="80%" fx="50%" fy="50%">
+                    <Stop
+                        offset="50%"
+                        stopColor="#fff"
+                        stopOpacity="1"
+                    />
+                    <Stop
+                        offset="100%"
+                        stopColor="#f00"
+                        stopOpacity="1"
+                    />
+                </RadialGradient>
+            </Defs>
+            <Rect
+                x="5"
+                y="5"
+                height="70"
+                width="190"
+                fill="blue"
+                stroke="url(#grad)"
+                strokeWidth="5"
+                strokeDasharray="10"
+            />
+
+            <Polyline
+                strokeDasharray="20,10,5,5,5,10"
+                points="10,10 20,12 30,20 40,60 60,70 90,55"
+                fill="none"
+                stroke="url(#grad)"
+                strokeLinecap="round"
+                strokeWidth="5"
+            />
+        </Svg>;
+    }
+}
+
+
 const icon = <Svg
    height="20"
    width="20"
@@ -70,7 +117,7 @@ const icon = <Svg
    </G>
 </Svg>;

-const samples = [StrokeExample, StrokeWidth, StrokeLinecap, StrokeDasharray];
+const samples = [StrokeExample, StrokeWidth, StrokeLinecap, StrokeDasharray, StrokePattern];

 export {
    icon,
--- a/elements/Gradient.js
+++ b/elements/Gradient.js
@@ -4,7 +4,7 @@ import React, {
    Children
 } from 'react-native';
 import {NativeGroup} from './G';
-import {set, remove} from '../lib/extract/extractFill';
+import {set, remove} from '../lib/extract/patterns';
 import percentFactory from '../lib/percentFactory';
 import percentToFloat from '../lib/percentToFloat';
 import Stop from './Stop';
--- a/ios/Brushes/RNSVGBrush.h
+++ b/ios/Brushes/RNSVGBrush.h
@@ -24,6 +24,8 @@
 */
 - (BOOL)applyFillColor:(CGContextRef)context;

+- (BOOL)applyStrokeColor:(CGContextRef)context;
+
 /**
 * paint fills the context with a brush. The context is assumed to
 * be clipped.
--- a/ios/Brushes/RNSVGBrush.m
+++ b/ios/Brushes/RNSVGBrush.m
@@ -24,6 +24,11 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
    return NO;
 }

+- (BOOL)applyStrokeColor:(CGContextRef)context
+{
+    return NO;
+}
+
 - (void)paint:(CGContextRef)context
 {
    // abstract
--- a/ios/Brushes/RNSVGSolidColor.m
+++ b/ios/Brushes/RNSVGSolidColor.m
@@ -13,26 +13,32 @@

@implementation RNSVGSolidColor
 {
-  CGColorRef _color;
+    CGColorRef _color;
 }

 - (instancetype)initWithArray:(NSArray<NSNumber *> *)array
 {
-  if ((self = [super initWithArray:array])) {
-    _color = CGColorRetain([RCTConvert CGColor:array offset:1]);
-  }
-  return self;
+    if ((self = [super initWithArray:array])) {
+        _color = CGColorRetain([RCTConvert CGColor:array offset:1]);
+    }
+    return self;
 }

 - (void)dealloc
 {
-  CGColorRelease(_color);
+    CGColorRelease(_color);
 }

 - (BOOL)applyFillColor:(CGContextRef)context
 {
-  CGContextSetFillColorWithColor(context, _color);
-  return YES;
+    CGContextSetFillColorWithColor(context, _color);
+    return YES;
+}
+
+- (BOOL)applyStrokeColor:(CGContextRef)context
+{
+    CGContextSetStrokeColorWithColor(context, _color);
+    return YES;
 }

@end
--- a/ios/RCTConvert+RNSVG.m
+++ b/ios/RCTConvert+RNSVG.m
@@ -19,210 +19,211 @@

 + (CGPathRef)CGPath:(id)json
 {
-  NSArray *arr = [self NSNumberArray:json];
-
-  NSUInteger count = [arr count];
-
+    NSArray *arr = [self NSNumberArray:json];
+    
+    NSUInteger count = [arr count];
+    
 #define NEXT_VALUE [self double:arr[i++]]
-
-  CGMutablePathRef path = CGPathCreateMutable();
-  CGPathMoveToPoint(path, NULL, 0, 0);
-
-  @try {
-    NSUInteger i = 0;
-    while (i < count) {
-      NSUInteger type = [arr[i++] unsignedIntegerValue];
-      switch (type) {
-        case 0:
-          CGPathMoveToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE);
-          break;
-        case 1:
-          CGPathCloseSubpath(path);
-          break;
-        case 2:
-          CGPathAddLineToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE);
-          break;
-        case 3:
-          CGPathAddCurveToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE);
-          break;
-        case 4:
-          CGPathAddArc(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE == 0);
-          break;
-        default:
-          RCTLogError(@"Invalid CGPath type %zd at element %zd of %@", type, i, arr);
-          CGPathRelease(path);
-          return NULL;
-      }
+    
+    CGMutablePathRef path = CGPathCreateMutable();
+    CGPathMoveToPoint(path, NULL, 0, 0);
+    
+    @try {
+        NSUInteger i = 0;
+        while (i < count) {
+            NSUInteger type = [arr[i++] unsignedIntegerValue];
+            switch (type) {
+                case 0:
+                    CGPathMoveToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE);
+                    break;
+                case 1:
+                    CGPathCloseSubpath(path);
+                    break;
+                case 2:
+                    CGPathAddLineToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE);
+                    break;
+                case 3:
+                    CGPathAddCurveToPoint(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE);
+                    break;
+                case 4:
+                    CGPathAddArc(path, NULL, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE, NEXT_VALUE == 0);
+                    break;
+                default:
+                    RCTLogError(@"Invalid CGPath type %zd at element %zd of %@", type, i, arr);
+                    CGPathRelease(path);
+                    return NULL;
+            }
+        }
    }
-  }
-  @catch (NSException *exception) {
-    RCTLogError(@"Invalid CGPath format: %@", arr);
-    CGPathRelease(path);
-    return NULL;
-  }
-
-  return (CGPathRef)CFAutorelease(path);
+    @catch (NSException *exception) {
+        RCTLogError(@"Invalid CGPath format: %@", arr);
+        CGPathRelease(path);
+        return NULL;
+    }
+    
+    return (CGPathRef)CFAutorelease(path);
 }

 RCT_ENUM_CONVERTER(CTTextAlignment, (@{
-  @"auto": @(kCTTextAlignmentNatural),
-  @"left": @(kCTTextAlignmentLeft),
-  @"center": @(kCTTextAlignmentCenter),
-  @"right": @(kCTTextAlignmentRight),
-  @"justify": @(kCTTextAlignmentJustified),
-}), kCTTextAlignmentNatural, integerValue)
+                                       @"auto": @(kCTTextAlignmentNatural),
+                                       @"left": @(kCTTextAlignmentLeft),
+                                       @"center": @(kCTTextAlignmentCenter),
+                                       @"right": @(kCTTextAlignmentRight),
+                                       @"justify": @(kCTTextAlignmentJustified),
+                                       }), kCTTextAlignmentNatural, integerValue)

 RCT_ENUM_CONVERTER(RNSVGCGFCRule, (@{
-  @"evenodd": @(kRNSVGCGFCRuleEvenodd),
-  @"nonzero": @(kRNSVGCGFCRuleNonzero),
-}), kRNSVGCGFCRuleNonzero, intValue)
+                                     @"evenodd": @(kRNSVGCGFCRuleEvenodd),
+                                     @"nonzero": @(kRNSVGCGFCRuleNonzero),
+                                     }), kRNSVGCGFCRuleNonzero, intValue)

 // This takes a tuple of text lines and a font to generate a CTLine for each text line.
 // This prepares everything for rendering a frame of text in RNSVGText.
 + (RNSVGTextFrame)RNSVGTextFrame:(id)json
 {
-  NSDictionary *dict = [self NSDictionary:json];
-  RNSVGTextFrame frame;
-  frame.count = 0;
-
-  NSArray *lines = [self NSArray:dict[@"lines"]];
-  NSUInteger lineCount = [lines count];
-  if (lineCount == 0) {
+    NSDictionary *dict = [self NSDictionary:json];
+    RNSVGTextFrame frame;
+    frame.count = 0;
+    
+    NSArray *lines = [self NSArray:dict[@"lines"]];
+    NSUInteger lineCount = [lines count];
+    if (lineCount == 0) {
+        return frame;
+    }
+    
+    NSDictionary *fontDict = dict[@"font"];
+    CTFontRef font = (__bridge CTFontRef)[self UIFont:nil withFamily:fontDict[@"fontFamily"] size:fontDict[@"fontSize"] weight:fontDict[@"fontWeight"] style:fontDict[@"fontStyle"] scaleMultiplier:1.0];
+    if (!font) {
+        return frame;
+    }
+    
+    // Create a dictionary for this font
+    CFDictionaryRef attributes = (__bridge CFDictionaryRef)@{
+                                                             (NSString *)kCTFontAttributeName: (__bridge id)font,
+                                                             (NSString *)kCTForegroundColorFromContextAttributeName: @YES
+                                                             };
+    
+    // Set up text frame with font metrics
+    CGFloat size = CTFontGetSize(font);
+    frame.count = lineCount;
+    frame.baseLine = size; // estimate base line
+    frame.lineHeight = size * 1.1; // Base on RNSVG canvas line height estimate
+    frame.lines = malloc(sizeof(CTLineRef) * lineCount);
+    frame.widths = malloc(sizeof(CGFloat) * lineCount);
+    
+    [lines enumerateObjectsUsingBlock:^(NSString *text, NSUInteger i, BOOL *stop) {
+        
+        CFStringRef string = (__bridge CFStringRef)text;
+        CFAttributedStringRef attrString = CFAttributedStringCreate(kCFAllocatorDefault, string, attributes);
+        CTLineRef line = CTLineCreateWithAttributedString(attrString);
+        CFRelease(attrString);
+        
+        frame.lines[i] = line;
+        frame.widths[i] = CTLineGetTypographicBounds(line, NULL, NULL, NULL);
+    }];
+    
    return frame;
-  }
-
-  NSDictionary *fontDict = dict[@"font"];
-  CTFontRef font = (__bridge CTFontRef)[self UIFont:nil withFamily:fontDict[@"fontFamily"] size:fontDict[@"fontSize"] weight:fontDict[@"fontWeight"] style:fontDict[@"fontStyle"] scaleMultiplier:1.0];
-  if (!font) {
-    return frame;
-  }
-
-  // Create a dictionary for this font
-  CFDictionaryRef attributes = (__bridge CFDictionaryRef)@{
-    (NSString *)kCTFontAttributeName: (__bridge id)font,
-    (NSString *)kCTForegroundColorFromContextAttributeName: @YES
-  };
-
-  // Set up text frame with font metrics
-  CGFloat size = CTFontGetSize(font);
-  frame.count = lineCount;
-  frame.baseLine = size; // estimate base line
-  frame.lineHeight = size * 1.1; // Base on RNSVG canvas line height estimate
-  frame.lines = malloc(sizeof(CTLineRef) * lineCount);
-  frame.widths = malloc(sizeof(CGFloat) * lineCount);
-
-  [lines enumerateObjectsUsingBlock:^(NSString *text, NSUInteger i, BOOL *stop) {
-
-    CFStringRef string = (__bridge CFStringRef)text;
-    CFAttributedStringRef attrString = CFAttributedStringCreate(kCFAllocatorDefault, string, attributes);
-    CTLineRef line = CTLineCreateWithAttributedString(attrString);
-    CFRelease(attrString);
-
-    frame.lines[i] = line;
-    frame.widths[i] = CTLineGetTypographicBounds(line, NULL, NULL, NULL);
-  }];
-
-  return frame;
 }

 + (RNSVGCGFloatArray)RNSVGCGFloatArray:(id)json
 {
-  NSArray *arr = [self NSNumberArray:json];
-  NSUInteger count = arr.count;
-
-  RNSVGCGFloatArray array;
-  array.count = count;
-  array.array = NULL;
-
-  if (count) {
-    // Ideally, these arrays should already use the same memory layout.
-    // In that case we shouldn't need this new malloc.
-    array.array = malloc(sizeof(CGFloat) * count);
-    for (NSUInteger i = 0; i < count; i++) {
-      array.array[i] = [arr[i] doubleValue];
+    NSArray *arr = [self NSNumberArray:json];
+    NSUInteger count = arr.count;
+    
+    RNSVGCGFloatArray array;
+    array.count = count;
+    array.array = NULL;
+    
+    if (count) {
+        // Ideally, these arrays should already use the same memory layout.
+        // In that case we shouldn't need this new malloc.
+        array.array = malloc(sizeof(CGFloat) * count);
+        for (NSUInteger i = 0; i < count; i++) {
+            array.array[i] = [arr[i] doubleValue];
+        }
    }
-  }
-
-  return array;
+    
+    return array;
 }

 + (RNSVGBrush *)RNSVGBrush:(id)json
 {
-  NSArray *arr = [self NSArray:json];
-  NSUInteger type = [self NSUInteger:arr.firstObject];
-  switch (type) {
-    case 0: // solid color
-      // These are probably expensive allocations since it's often the same value.
-      // We should memoize colors but look ups may be just as expensive.
-      return [[RNSVGSolidColor alloc] initWithArray:arr];
-    case 1: // linear gradient
-      return [[RNSVGLinearGradient alloc] initWithArray:arr];
-    case 2: // radial gradient
-      return [[RNSVGRadialGradient alloc] initWithArray:arr];
-    case 3: // pattern
-      return [[RNSVGPattern alloc] initWithArray:arr];
-    default:
-      RCTLogError(@"Unknown brush type: %zd", type);
-      return nil;
-  }
+    NSArray *arr = [self NSArray:json];
+    NSUInteger type = [self NSUInteger:arr.firstObject];
+    
+    switch (type) {
+        case 0: // solid color
+            // These are probably expensive allocations since it's often the same value.
+            // We should memoize colors but look ups may be just as expensive.
+            return [[RNSVGSolidColor alloc] initWithArray:arr];
+        case 1: // linear gradient
+            return [[RNSVGLinearGradient alloc] initWithArray:arr];
+        case 2: // radial gradient
+            return [[RNSVGRadialGradient alloc] initWithArray:arr];
+        case 3: // pattern
+            return [[RNSVGPattern alloc] initWithArray:arr];
+        default:
+            RCTLogError(@"Unknown brush type: %zd", type);
+            return nil;
+    }
 }

 + (CGPoint)CGPoint:(id)json offset:(NSUInteger)offset
 {
-  NSArray *arr = [self NSArray:json];
-  if (arr.count < offset + 2) {
-    RCTLogError(@"Too few elements in array (expected at least %zd): %@", 2 + offset, arr);
-    return CGPointZero;
-  }
-  return (CGPoint){
-    [self CGFloat:arr[offset]],
-    [self CGFloat:arr[offset + 1]],
-  };
+    NSArray *arr = [self NSArray:json];
+    if (arr.count < offset + 2) {
+        RCTLogError(@"Too few elements in array (expected at least %zd): %@", 2 + offset, arr);
+        return CGPointZero;
+    }
+    return (CGPoint){
+        [self CGFloat:arr[offset]],
+        [self CGFloat:arr[offset + 1]],
+    };
 }

 + (CGRect)CGRect:(id)json offset:(NSUInteger)offset
 {
-  NSArray *arr = [self NSArray:json];
-  if (arr.count < offset + 4) {
-    RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
-    return CGRectZero;
-  }
-  return (CGRect){
-    {[self CGFloat:arr[offset]], [self CGFloat:arr[offset + 1]]},
-    {[self CGFloat:arr[offset + 2]], [self CGFloat:arr[offset + 3]]},
-  };
+    NSArray *arr = [self NSArray:json];
+    if (arr.count < offset + 4) {
+        RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
+        return CGRectZero;
+    }
+    return (CGRect){
+        {[self CGFloat:arr[offset]], [self CGFloat:arr[offset + 1]]},
+        {[self CGFloat:arr[offset + 2]], [self CGFloat:arr[offset + 3]]},
+    };
 }

 + (CGColorRef)CGColor:(id)json offset:(NSUInteger)offset
 {
-  NSArray *arr = [self NSArray:json];
-  if (arr.count < offset + 4) {
-    RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
-    return NULL;
-  }
-  return [self CGColor:[arr subarrayWithRange:(NSRange){offset, 4}]];
+    NSArray *arr = [self NSArray:json];
+    if (arr.count < offset + 4) {
+        RCTLogError(@"Too few elements in array (expected at least %zd): %@", 4 + offset, arr);
+        return NULL;
+    }
+    return [self CGColor:[arr subarrayWithRange:(NSRange){offset, 4}]];
 }

 + (CGGradientRef)CGGradient:(id)json offset:(NSUInteger)offset
 {
-  NSArray *arr = [self NSArray:json];
-  if (arr.count < offset) {
-    RCTLogError(@"Too few elements in array (expected at least %zd): %@", offset, arr);
-    return NULL;
-  }
-  arr = [arr subarrayWithRange:(NSRange){offset, arr.count - offset}];
-  RNSVGCGFloatArray colorsAndOffsets = [self RNSVGCGFloatArray:arr];
-  size_t stops = colorsAndOffsets.count / 5;
-  CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
-  CGGradientRef gradient = CGGradientCreateWithColorComponents(
-    rgb,
-    colorsAndOffsets.array,
-    colorsAndOffsets.array + stops * 4,
-    stops
-  );
-  CGColorSpaceRelease(rgb);
-  free(colorsAndOffsets.array);
-  return (CGGradientRef)CFAutorelease(gradient);
+    NSArray *arr = [self NSArray:json];
+    if (arr.count < offset) {
+        RCTLogError(@"Too few elements in array (expected at least %zd): %@", offset, arr);
+        return NULL;
+    }
+    arr = [arr subarrayWithRange:(NSRange){offset, arr.count - offset}];
+    RNSVGCGFloatArray colorsAndOffsets = [self RNSVGCGFloatArray:arr];
+    size_t stops = colorsAndOffsets.count / 5;
+    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
+    CGGradientRef gradient = CGGradientCreateWithColorComponents(
+                                                                 rgb,
+                                                                 colorsAndOffsets.array,
+                                                                 colorsAndOffsets.array + stops * 4,
+                                                                 stops
+                                                                 );
+    CGColorSpaceRelease(rgb);
+    free(colorsAndOffsets.array);
+    return (CGGradientRef)CFAutorelease(gradient);
 }

@end
--- a/ios/RNSVGPath.m
+++ b/ios/RNSVGPath.m
@@ -32,10 +32,13 @@
    }
    
    CGPathDrawingMode mode = kCGPathStroke;
+    BOOL fillColor = YES;
+    
    if (self.fill) {
-        if ([self.fill applyFillColor:context]) {
-            mode = self.fillRule == kRNSVGCGFCRuleEvenodd ? kCGPathEOFill : kCGPathFill;
-        } else {
+        mode = self.fillRule == kRNSVGCGFCRuleEvenodd ? kCGPathEOFill : kCGPathFill;
+        fillColor = [self.fill applyFillColor:context];
+        
+        if (!fillColor) {
            if (self.clipPath) {
                [self clip:context];
            }
@@ -51,23 +54,46 @@
        }
    }
    if (self.stroke) {
-        CGContextSetStrokeColorWithColor(context, self.stroke);
        CGContextSetLineWidth(context, self.strokeWidth);
        CGContextSetLineCap(context, self.strokeLinecap);
        CGContextSetLineJoin(context, self.strokeLinejoin);
        RNSVGCGFloatArray dash = self.strokeDash;
+        
+        // TODO: render as web svgs do
        if (dash.count) {
            CGContextSetLineDash(context, 0, dash.array, dash.count);
        }
-        if (mode == kCGPathFill) {
-            mode = kCGPathFillStroke;
-        } else if (mode == kCGPathEOFill) {
-            mode = kCGPathEOFillStroke;
+        
+        if (!fillColor) {
+            CGContextAddPath(context, self.d);
+            CGContextReplacePathWithStrokedPath(context);
+            CGContextClip(context);
+        }
+        
+        if ([self.stroke applyStrokeColor:context]) {
+
+            if (mode == kCGPathFill) {
+                mode = kCGPathFillStroke;
+            } else if (mode == kCGPathEOFill) {
+                mode = kCGPathEOFillStroke;
+            }
+        } else {
+            // draw fill
+            [self clip:context];
+            CGContextAddPath(context, self.d);
+            CGContextDrawPath(context, mode);
+            
+            // draw stroke
+            CGContextAddPath(context, self.d);
+            CGContextReplacePathWithStrokedPath(context);
+            CGContextClip(context);
+            [self.stroke paint:context];
+            
+            return;
        }
    }
    
    [self clip:context];
-    
    CGContextAddPath(context, self.d);
    CGContextDrawPath(context, mode);
 }
--- a/ios/RNSVGRenderable.h
+++ b/ios/RNSVGRenderable.h
@@ -17,7 +17,7 @@

@property (nonatomic, strong) RNSVGBrush *fill;
@property (nonatomic, assign) RNSVGCGFCRule fillRule;
-@property (nonatomic, assign) CGColorRef stroke;
+@property (nonatomic, strong) RNSVGBrush *stroke;
@property (nonatomic, assign) CGFloat strokeWidth;
@property (nonatomic, assign) CGLineCap strokeLinecap;
@property (nonatomic, assign) CGLineJoin strokeLinejoin;
--- a/ios/RNSVGRenderable.m
+++ b/ios/RNSVGRenderable.m
@@ -16,14 +16,10 @@
    _fill = fill;
 }

- (void)setStroke:(CGColorRef)stroke
+- (void)setStroke:(RNSVGBrush *)stroke
 {
-    if (stroke == _stroke) {
-        return;
-    }
    [self invalidate];
-    CGColorRelease(_stroke);
-    _stroke = CGColorRetain(stroke);
+    _stroke = stroke;
 }

 - (void)setStrokeWidth:(CGFloat)strokeWidth
@@ -58,7 +54,6 @@

 - (void)dealloc
 {
-    CGColorRelease(_stroke);
    if (_strokeDash.array) {
        free(_strokeDash.array);
    }
--- a/ios/RNSVGText.m
+++ b/ios/RNSVGText.m
@@ -14,114 +14,117 @@

 - (void)setAlignment:(CTTextAlignment)alignment
 {
-  [self invalidate];
-  _alignment = alignment;
+    [self invalidate];
+    _alignment = alignment;
 }

 static void RNSVGFreeTextFrame(RNSVGTextFrame frame)
 {
-  if (frame.count) {
-    // We must release each line before freeing up this struct
-    for (int i = 0; i < frame.count; i++) {
-      CFRelease(frame.lines[i]);
+    if (frame.count) {
+        // We must release each line before freeing up this struct
+        for (int i = 0; i < frame.count; i++) {
+            CFRelease(frame.lines[i]);
+        }
+        free(frame.lines);
+        free(frame.widths);
    }
-    free(frame.lines);
-    free(frame.widths);
-  }
 }

 - (void)setTextFrame:(RNSVGTextFrame)frame
 {
-  if (frame.lines != _textFrame.lines) {
-    RNSVGFreeTextFrame(_textFrame);
-  }
-  [self invalidate];
-  _textFrame = frame;
+    if (frame.lines != _textFrame.lines) {
+        RNSVGFreeTextFrame(_textFrame);
+    }
+    [self invalidate];
+    _textFrame = frame;
 }

 - (void)dealloc
 {
-  RNSVGFreeTextFrame(_textFrame);
+    RNSVGFreeTextFrame(_textFrame);
 }

 - (void)renderLayerTo:(CGContextRef)context
 {
-  RNSVGTextFrame frame = self.textFrame;
-
-  if ((!self.fill && !self.stroke) || !frame.count) {
-    return;
-  }
-
-  // to-do: draw along a path
-  // to-do: fill-rule
-  // to-do: clip
-  CGTextDrawingMode mode = kCGTextStroke;
-  if (self.fill) {
-    if ([self.fill applyFillColor:context]) {
-      mode = kCGTextFill;
-    } else {
-
-      for (int i = 0; i < frame.count; i++) {
-        CGContextSaveGState(context);
-        // Inverse the coordinate space since CoreText assumes a bottom-up coordinate space
-        CGContextScaleCTM(context, 1.0, -1.0);
-        CGContextSetTextDrawingMode(context, kCGTextClip);
-        [self renderLineTo:context atIndex:i];
-        // Inverse the coordinate space back to the original before filling
-        CGContextScaleCTM(context, 1.0, -1.0);
-        [self.fill paint:context];
-        // Restore the state so that the next line can be clipped separately
-        CGContextRestoreGState(context);
-      }
-
-      if (!self.stroke) {
+    RNSVGTextFrame frame = self.textFrame;
+    
+    if ((!self.fill && !self.stroke) || !frame.count) {
        return;
-      }
    }
-  }
-  if (self.stroke) {
-    CGContextSetStrokeColorWithColor(context, self.stroke);
-    CGContextSetLineWidth(context, self.strokeWidth);
-    CGContextSetLineCap(context, self.strokeLinecap);
-    CGContextSetLineJoin(context, self.strokeLinejoin);
-    RNSVGCGFloatArray dash = self.strokeDash;
-    if (dash.count) {
-      CGContextSetLineDash(context, 0, dash.array, dash.count);
+    
+    // to-do: draw along a path
+    // to-do: fill-rule
+    // to-do: clip
+    CGTextDrawingMode mode = kCGTextStroke;
+    if (self.fill) {
+        if ([self.fill applyFillColor:context]) {
+            mode = kCGTextFill;
+        } else {
+            
+            for (int i = 0; i < frame.count; i++) {
+                CGContextSaveGState(context);
+                // Inverse the coordinate space since CoreText assumes a bottom-up coordinate space
+                CGContextScaleCTM(context, 1.0, -1.0);
+                CGContextSetTextDrawingMode(context, kCGTextClip);
+                [self renderLineTo:context atIndex:i];
+                // Inverse the coordinate space back to the original before filling
+                CGContextScaleCTM(context, 1.0, -1.0);
+                [self.fill paint:context];
+                // Restore the state so that the next line can be clipped separately
+                CGContextRestoreGState(context);
+            }
+            
+            if (!self.stroke) {
+                return;
+            }
+        }
    }
-    if (mode == kCGTextFill) {
-      mode = kCGTextFillStroke;
+    if (self.stroke) {
+        if ([self.stroke applyStrokeColor:context] == NO) {
+            [self.stroke paint:context];
+        }
+        
+        CGContextSetLineWidth(context, self.strokeWidth);
+        CGContextSetLineCap(context, self.strokeLinecap);
+        CGContextSetLineJoin(context, self.strokeLinejoin);
+        RNSVGCGFloatArray dash = self.strokeDash;
+        if (dash.count) {
+            CGContextSetLineDash(context, 0, dash.array, dash.count);
+        }
+        if (mode == kCGTextFill) {
+            mode = kCGTextFillStroke;
+        }
+    }
+    
+    CGContextSetTextDrawingMode(context, mode);
+    
+    // Inverse the coordinate space since CoreText assumes a bottom-up coordinate space
+    CGContextScaleCTM(context, 1.0, -1.0);
+    for (int i = 0; i < frame.count; i++) {
+        [self renderLineTo:context atIndex:i];
    }
-  }
-
-  CGContextSetTextDrawingMode(context, mode);
-
-  // Inverse the coordinate space since CoreText assumes a bottom-up coordinate space
-  CGContextScaleCTM(context, 1.0, -1.0);
-  for (int i = 0; i < frame.count; i++) {
-    [self renderLineTo:context atIndex:i];
-  }
 }

 - (void)renderLineTo:(CGContextRef)context atIndex:(int)index
 {
-  RNSVGTextFrame frame = self.textFrame;
-  CGFloat shift;
-  switch (self.alignment) {
-    case kCTTextAlignmentRight:
-      shift = frame.widths[index];
-      break;
-    case kCTTextAlignmentCenter:
-      shift = (frame.widths[index] / 2);
-      break;
-    default:
-      shift = 0;
-      break;
-  }
-  // We should consider snapping this shift to device pixels to improve rendering quality
-  // when a line has subpixel width.
-  CGContextSetTextPosition(context, -shift, -frame.baseLine - frame.lineHeight * index);
-  CTLineRef line = frame.lines[index];
-  CTLineDraw(line, context);
+    RNSVGTextFrame frame = self.textFrame;
+    CGFloat shift;
+    switch (self.alignment) {
+        case kCTTextAlignmentRight:
+            shift = frame.widths[index];
+            break;
+        case kCTTextAlignmentCenter:
+            shift = (frame.widths[index] / 2);
+            break;
+        default:
+            shift = 0;
+            break;
+    }
+    // We should consider snapping this shift to device pixels to improve rendering quality
+    // when a line has subpixel width.
+    CGContextSetTextPosition(context, -shift, -frame.baseLine - frame.lineHeight * index);
+    CTLineRef line = frame.lines[index];
+    CTLineDraw(line, context);
 }

@end
--- a/ios/ViewManagers/RNSVGRenderableManager.m
+++ b/ios/ViewManagers/RNSVGRenderableManager.m
@@ -20,12 +20,12 @@ RCT_EXPORT_MODULE()
    return [RNSVGRenderable new];
 }

+RCT_EXPORT_VIEW_PROPERTY(fill, RNSVGBrush)
+RCT_EXPORT_VIEW_PROPERTY(fillRule, RNSVGCGFCRule)
+RCT_EXPORT_VIEW_PROPERTY(stroke, RNSVGBrush)
 RCT_EXPORT_VIEW_PROPERTY(strokeWidth, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(strokeLinecap, CGLineCap)
 RCT_EXPORT_VIEW_PROPERTY(strokeLinejoin, CGLineJoin)
-RCT_EXPORT_VIEW_PROPERTY(fill, RNSVGBrush)
-RCT_EXPORT_VIEW_PROPERTY(fillRule, RNSVGCGFCRule)
-RCT_EXPORT_VIEW_PROPERTY(stroke, CGColor)
 RCT_EXPORT_VIEW_PROPERTY(strokeDash, RNSVGCGFloatArray)
 RCT_EXPORT_VIEW_PROPERTY(clipPath, CGPath)
 RCT_EXPORT_VIEW_PROPERTY(clipRule, RNSVGCGFCRule)
--- a/lib/extract/extractBrush.js
+++ b/lib/extract/extractBrush.js
@@ -26,7 +26,7 @@ function applyBoundingBoxToBrushData(brushData, props) {
 }

 export default function (colorOrBrush, props) {
-    if (colorOrBrush == null) {
+    if (!colorOrBrush) {
        return null;
    }
    if (colorOrBrush._brush) {
--- a/lib/extract/extractFill.js
+++ b/lib/extract/extractFill.js
@@ -1,63 +1,19 @@
 import rgba from '../rgba';
-import {LinearGradientGenerator} from '../../elements/LinearGradient';
-import {RadialGradientGenerator} from '../../elements/RadialGradient';
 import extractBrush from './extractBrush';
-import fillReg from './patternReg';
-
-let fillPatterns = {};
-
-function isGradient(obj) {
-    return obj instanceof LinearGradientGenerator || obj instanceof RadialGradientGenerator;
-}
-
-function set(id, pattern) {
-    fillPatterns[id] = pattern;
-}
-
-function remove(id) {
-    delete fillPatterns[id];
-}
+import patterns from './patterns';

 const fillRules = {
    evenodd: 0,
    nonzero: 1
 };

-function fillFilter(props) {
+function fillFilter(props, dimensions) {
    let {fill} = props;

    if (fill === 'none') {
        return null;
-    } if (fill) {
-
-        if (isGradient(fill)) {
-            return fill;
-        }
-
-        let fillOpacity = +props.fillOpacity;
-        if (isNaN(fillOpacity)) {
-            fillOpacity = 1;
-        }
-
-        // 尝试匹配 fill="url(#pattern)"
-        let matched = fill.match(fillReg);
-
-        if (matched) {
-            let patternName = `${matched[1]}:${props.svgId}`;
-            let pattern = fillPatterns[patternName];
-
-            if (pattern) {
-                if (pattern.length === 2) {
-                    let dimensions = this.getBoundingBox();
-                    return pattern(dimensions, fillOpacity);
-                } else {
-                    return pattern(fillOpacity);
-                }
-            }
-            return null;
-        }
-
-        return rgba(props.fill, fillOpacity).rgbaString();
+    } else if (fill) {
+        return patterns(fill, +props.fillOpacity, dimensions, props.svgId);
    } else if (props.fill === undefined) {
        let fillOpacity = +props.fillOpacity;
        if (isNaN(fillOpacity)) {
@@ -67,20 +23,14 @@ function fillFilter(props) {
    } else {
        return null;
    }
-
 }

-export default function(props) {
-    let fill = fillFilter.call(this, props);
+export default function(props, dimensions) {
+    let fill = extractBrush(fillFilter(props, dimensions), props);
    let fillRule = fillRules[props.fillRule] === 0 ? 0 : 1;

    return {
-        fill: extractBrush(fill, props),
+        fill,
        fillRule
    };
 }
-
-export {
-    set,
-    remove
-}
--- a/lib/extract/extractProps.js
+++ b/lib/extract/extractProps.js
@@ -14,16 +14,18 @@ export default function(props, options = {stroke: true, join: true, transform: t
        opacity: +props.opacity || 1
    };

+    let dimensions = this.getBoundingBox ? this.getBoundingBox() : null;
+
    if (props.clipPath) {
        _.assign(extractedProps, extractClipping(props));
    }

    if (options.stroke) {
-        _.assign(extractedProps, extractStroke(props));
+        _.assign(extractedProps, extractStroke(props, dimensions));
    }

    if (options.fill) {
-        _.assign(extractedProps, extractFill.call(this, props));
+        _.assign(extractedProps, extractFill(props, dimensions));
    }

    if (options.transform) {
--- a/lib/extract/extractStroke.js
+++ b/lib/extract/extractStroke.js
@@ -1,5 +1,6 @@
-import rgba from '../rgba';
 import extractBrush from './extractBrush';
+import patterns from './patterns';
+
 let separator = /\s*,\s*/;

 const caps = {
@@ -14,9 +15,10 @@ const joins = {
    round: 1
 };

-function strokeFilter(props) {
-    if (!props.stroke && !props.strokeLinecap && !props.strokeOpacity &&
-        !props.strokeLinejoin && !props.strokeDasharray && !props.strokeWidth) {
+function strokeFilter(props, dimensions) {
+    let strokeWidth = +props.strokeWidth;
+    let {stroke} = props;
+    if (!strokeWidth && !stroke) {
        return null;
    }

@@ -26,30 +28,25 @@ function strokeFilter(props) {
        strokeDasharray = strokeDasharray.split(separator).map(dash => +dash);
    }

+
+    if (!stroke) {
+        stroke = '#000';
+    }
+
+    // TODO: propTypes check
    return {
-        stroke: rgba(props.stroke, props.strokeOpacity).rgbaArray(),
+        stroke: patterns(stroke, +props.strokeOpacity, dimensions, props.svgId),
        strokeLinecap: caps[props.strokeLinecap] || 2,
        strokeLinejoin: joins[props.strokeLinejoin] || 0,
        strokeDash: strokeDasharray || null,
-        strokeWidth: +props.strokeWidth || 1
+        strokeWidth: strokeWidth || 1
    };
 }

-export default function(props) {
-    let strokeProps = strokeFilter(props);
-    if (!strokeProps) {
-        return {};
-    }
-
-    let {stroke} = strokeProps;
-    return {
+export default function(props, dimensions) {
+    let strokeProps = strokeFilter(props, dimensions);
+    return strokeProps ? {
        ...strokeProps,
-        stroke: stroke ? [stroke[0] / 255, stroke[1] / 255, stroke[2] / 255, stroke[3]] : null
-    };
-
-    // TODO: implement brush on stroke prop
-    //return {
-    //    ...strokeProps,
-    //    stroke: extractBrush(strokeProps.stroke, props)
-    //};
+        stroke: extractBrush(strokeProps.stroke, props)
+    } : null;
 }
--- a/lib/extract/patternReg.js
+++ b/lib/extract/patternReg.js
@@ -1 +0,0 @@
-export default /^url\(#(\w+?)\)$/;
--- a/lib/extract/patterns.js
+++ b/lib/extract/patterns.js
@@ -0,0 +1,53 @@
+import rgba from '../rgba';
+let patterns = {};
+let patternReg = /^url\(#(\w+?)\)$/;
+
+import {LinearGradientGenerator} from '../../elements/LinearGradient';
+import {RadialGradientGenerator} from '../../elements/RadialGradient';
+
+
+function isGradient(obj) {
+    return obj instanceof LinearGradientGenerator || obj instanceof RadialGradientGenerator;
+}
+
+function set(id, pattern) {
+    patterns[id] = pattern;
+}
+
+function remove(id) {
+    delete patterns[id];
+}
+
+export {
+    set,
+    remove
+}
+
+export default function(patternSting, opacity, dimensions, svgId) {
+    if (isGradient(patternSting)) {
+        return patternSting;
+    }
+
+    if (isNaN(opacity)) {
+        opacity = 1;
+    }
+
+    // 尝试匹配 "url(#pattern)"
+    let matched = patternSting.match(patternReg);
+
+    if (matched) {
+        let patternName = `${matched[1]}:${svgId}`;
+        let pattern = patterns[patternName];
+
+        if (pattern) {
+            if (pattern.length === 2) {
+                return pattern(dimensions, opacity);
+            } else {
+                return pattern(opacity);
+            }
+        }
+        return null;
+    }
+
+    return rgba(patternSting, opacity).rgbaString();
+}
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-    "version": "1.0.0",
+    "version": "1.0.1",
    "name": "react-native-svg",
    "description": "react native svg library",
    "repository": {