add ClipPath element support

lib/extract/extractClipping.js

@@ -1,18 +1,47 @@
 import SerializablePath from 'react-native/Libraries/ART/ARTSerializablePath';
+import clipReg from './patternReg';
 
+let clipPatterns = {};
 const clipRules = {
     evenodd: 0,
     nonzero: 1
 };
 
+function set(id, pattern) {
+    clipPatterns[id] = pattern;
+}
+
+function remove(id) {
+    delete clipPatterns[id];
+}
+
+
 export default function (props) {
     let {clipPath, clipRule} = props;
     let clippingProps = {};
 
     if (clipPath) {
-        clippingProps.clipPath = new SerializablePath(clipPath).toJSON();
         clippingProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
+
+        let matched = clipPath.match(clipReg);
+
+        if (matched) {
+            let patternName = `${matched[1]}:${props.svgId}`;
+            let pattern = clipPatterns[patternName];
+            if (pattern) {
+                clippingProps.clipPath = new SerializablePath(pattern).toJSON();
+            } else {
+                // TODO: warn
+            }
+        } else {
+            clippingProps.clipPath = new SerializablePath(clipPath).toJSON();
+        }
     }
 
     return clippingProps;
 }
+
+export {
+    set,
+    remove
+}

lib/extract/extractFill.js

@@ -2,9 +2,9 @@ import rgba from '../rgba';
 import {LinearGradientGenerator} from '../../elements/LinearGradient';
 import {RadialGradientGenerator} from '../../elements/RadialGradient';
 import extractBrush from './extractBrush';
+import fillReg from './patternReg';
 
 let fillPatterns = {};
-let fillReg = /^url\(#(\w+?)\)$/;
 
 function isGradient(obj) {
     return obj instanceof LinearGradientGenerator || obj instanceof RadialGradientGenerator;

lib/extract/patternReg.js

@@ -0,0 +1 @@
+export default /^url\(#(\w+?)\)$/;