Add support for clipRule on ClipPath element

[iOS] fix spec conformance, clipRule on non ClipPath elements must not
have any effect.

android/src/main/java/com/horcrux/svg/ClipPathView.java

@@ -22,6 +22,7 @@ class ClipPathView extends GroupView {
 
     public ClipPathView(ReactContext reactContext) {
         super(reactContext);
+        mClipRule = CLIP_RULE_NONZERO;
     }
 
     @Override

android/src/main/java/com/horcrux/svg/VirtualView.java

@@ -63,12 +63,12 @@ abstract public class VirtualView extends ReactViewGroup {
     boolean mTransformInvertible = true;
     private RectF mClientRect;
 
-    private int mClipRule;
+    int mClipRule;
     private @Nullable String mClipPath;
     @Nullable String mMask;
 
     private static final int CLIP_RULE_EVENODD = 0;
-    private static final int CLIP_RULE_NONZERO = 1;
+    static final int CLIP_RULE_NONZERO = 1;
 
     final float mScale;
     private boolean mResponsible;
@@ -271,8 +271,9 @@ abstract public class VirtualView extends ReactViewGroup {
             ClipPathView mClipNode = (ClipPathView) getSvgView().getDefinedClipPath(mClipPath);
 
             if (mClipNode != null) {
-                Path clipPath = mClipNode.getPath(canvas, paint, Region.Op.UNION);
-                switch (mClipRule) {
+                Path clipPath = mClipNode.mClipRule == CLIP_RULE_EVENODD ? mClipNode.getPath(canvas, paint) :
+                        mClipNode.getPath(canvas, paint, Region.Op.UNION);
+                switch (mClipNode.mClipRule) {
                     case CLIP_RULE_EVENODD:
                         clipPath.setFillType(Path.FillType.EVEN_ODD);
                         break;

elements/ClipPath.js

@@ -1,12 +1,17 @@
 import React, { Component } from "react";
 import { requireNativeComponent } from "react-native";
+import extractClipPath from "../lib/extract/extractClipPath";
 
 export default class extends Component {
     static displayName = "ClipPath";
 
     render() {
         const { id, children } = this.props;
-        return <RNSVGClipPath name={id}>{children}</RNSVGClipPath>;
+        return (
+            <RNSVGClipPath name={id} {...extractClipPath(this.props)}>
+                {children}
+            </RNSVGClipPath>
+        );
     }
 }
 

ios/Elements/RNSVGGroup.m

@@ -133,7 +133,7 @@
         RNSVGClipPath *clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
         if ([clipNode isSimpleClipPath]) {
             CGPathRef clipPath = [self getClipPath];
-            if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, self.clipRule == kRNSVGCGFCRuleEvenodd)) {
+            if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, clipNode.clipRule == kRNSVGCGFCRuleEvenodd)) {
                 return nil;
             }
         } else {

ios/RNSVGNode.m

@@ -21,6 +21,7 @@
 {
     RNSVGGlyphContext *glyphContext;
     BOOL _transparent;
+    RNSVGClipPath *_clipNode;
     CGPathRef _cachedClipPath;
     CGImageRef _clipMask;
     CGFloat canvasWidth;
@@ -248,7 +249,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
 - (CGPathRef)getClipPath:(CGContextRef)context
 {
     if (self.clipPath) {
-        RNSVGClipPath *_clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
+        _clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
         _cachedClipPath = CGPathRetain([_clipNode getPath:context]);
         if (_clipMask) {
             CGImageRelease(_clipMask);
@@ -280,7 +281,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
     if (clipPath) {
         if (!_clipMask) {
             CGContextAddPath(context, clipPath);
-            if (self.clipRule == kRNSVGCGFCRuleEvenodd) {
+            if (_clipNode.clipRule == kRNSVGCGFCRuleEvenodd) {
                 CGContextEOClip(context);
             } else {
                 CGContextClip(context);

ios/RNSVGRenderable.m

@@ -432,7 +432,7 @@ UInt32 saturate(CGFloat value) {
         RNSVGClipPath *clipNode = (RNSVGClipPath*)[self.svgView getDefinedClipPath:self.clipPath];
         if ([clipNode isSimpleClipPath]) {
             CGPathRef clipPath = [self getClipPath];
-            if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, self.clipRule == kRNSVGCGFCRuleEvenodd)) {
+            if (clipPath && !CGPathContainsPoint(clipPath, nil, transformed, clipNode.clipRule == kRNSVGCGFCRuleEvenodd)) {
                 return nil;
             }
         } else {

lib/extract/extractClipPath.js

@@ -9,9 +9,11 @@ export default function(props) {
     const { clipPath, clipRule } = props;
     const clipPathProps = {};
 
-    if (clipPath) {
+    if (clipRule) {
         clipPathProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
+    }
 
+    if (clipPath) {
         const matched = clipPath.match(clipReg);
 
         if (matched) {