Fix #844

Handle svg root width/height attribute strings containing px on iOS
Inherit fill/stroke attributes from Mask elements
Set default bounding box of mask to fill viewport / allow missing x, y, width, height on mask element

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

@@ -88,9 +88,12 @@ class GroupView extends RenderableView {
         final GroupView self = this;
         final RectF groupRect = new RectF();
         for (int i = 0; i < getChildCount(); i++) {
-            View lNode = getChildAt(i);
-            if (lNode instanceof VirtualView) {
-                VirtualView node = ((VirtualView)lNode);
+            View child = getChildAt(i);
+            if (child instanceof MaskView) {
+                continue;
+            }
+            if (child instanceof VirtualView) {
+                VirtualView node = ((VirtualView)child);
                 if (node instanceof RenderableView) {
                     ((RenderableView)node).mergeProperties(self);
                 }
@@ -111,8 +114,8 @@ class GroupView extends RenderableView {
                 if (node.isResponsible()) {
                     svg.enableTouchEvents();
                 }
-            } else if (lNode instanceof SvgView) {
-                SvgView svgView = (SvgView)lNode;
+            } else if (child instanceof SvgView) {
+                SvgView svgView = (SvgView)child;
                 svgView.drawChildren(canvas);
             }
         }
@@ -133,6 +136,9 @@ class GroupView extends RenderableView {
 
         for (int i = 0; i < getChildCount(); i++) {
             View node = getChildAt(i);
+            if (node instanceof MaskView) {
+                continue;
+            }
             if (node instanceof VirtualView) {
                 VirtualView n = (VirtualView)node;
                 Matrix transform = n.mMatrix;
@@ -150,6 +156,9 @@ class GroupView extends RenderableView {
             final Path.Op pop = Path.Op.valueOf(op.name());
             for (int i = 0; i < getChildCount(); i++) {
                 View node = getChildAt(i);
+                if (node instanceof MaskView) {
+                    continue;
+                }
                 if (node instanceof VirtualView) {
                     VirtualView n = (VirtualView)node;
                     Matrix transform = n.mMatrix;
@@ -169,6 +178,9 @@ class GroupView extends RenderableView {
             final Region r = new Region();
             for (int i = 0; i < getChildCount(); i++) {
                 View node = getChildAt(i);
+                if (node instanceof MaskView) {
+                    continue;
+                }
                 if (node instanceof VirtualView) {
                     VirtualView n = (VirtualView)node;
                     Matrix transform = n.mMatrix;
@@ -221,6 +233,9 @@ class GroupView extends RenderableView {
             if (!(child instanceof VirtualView)) {
                 continue;
             }
+            if (child instanceof MaskView) {
+                continue;
+            }
 
             VirtualView node = (VirtualView) child;
 

elements/Mask.js

@@ -1,12 +1,20 @@
 import React from "react";
 import { requireNativeComponent } from "react-native";
 import extractTransform from "../lib/extract/extractTransform";
+import extractProps from "react-native-svg/lib/extract/extractProps";
 import units from "../lib/units";
 import Shape from "./Shape";
 
 export default class Mask extends Shape {
     static displayName = "Mask";
 
+    static defaultProps = {
+        x: "0%",
+        y: "0%",
+        width: "100%",
+        height: "100%",
+    };
+
     render() {
         const { props } = this;
         const {
@@ -24,7 +32,7 @@ export default class Mask extends Shape {
         return (
             <RNSVGMask
                 ref={this.refMethod}
-                name={id}
+                {...extractProps({ ...props, x: null, y: null }, this)}
                 x={x}
                 y={y}
                 width={width}

elements/Svg.js

@@ -89,9 +89,11 @@ export default class Svg extends Shape {
             strokeMiterlimit,
         } = stylesAndProps;
 
+        const w = parseInt(width);
+        const h = parseInt(height);
         const dimensions = width && height ? {
-            width: width[width.length - 1] === "%" ? width : +width,
-            height: height[height.length - 1] === "%" ? height : +height,
+            width: isNaN(w) || width[width.length - 1] === '%' ? width : w,
+            height: isNaN(h) || height[height.length - 1] === '%' ? height : h,
             flex: 0,
         } : null;
 

elements/Use.js

@@ -34,7 +34,7 @@ export default class Use extends Shape {
             <RNSVGUse
                 ref={this.refMethod}
                 {...extractProps(
-                    { ...props, x: undefined, y: undefined },
+                    { ...props, x: null, y: null },
                     this,
                 )}
                 href={match}

ios/Elements/RNSVGGroup.m

@@ -8,6 +8,7 @@
 
 #import "RNSVGGroup.h"
 #import "RNSVGClipPath.h"
+#import "RNSVGMask.h"
 
 @implementation RNSVGGroup
 {
@@ -38,7 +39,9 @@
     __block CGRect bounds = CGRectNull;
 
     [self traverseSubviews:^(UIView *node) {
-        if ([node isKindOfClass:[RNSVGNode class]]) {
+        if ([node isKindOfClass:[RNSVGMask class]]) {
+            // no-op
+        } else if ([node isKindOfClass:[RNSVGNode class]]) {
             RNSVGNode* svgNode = (RNSVGNode*)node;
             if (svgNode.responsible && !self.svgView.responsible) {
                 self.svgView.responsible = YES;
@@ -203,7 +206,7 @@
         [self.svgView defineTemplate:weakSelf templateName:self.name];
     }
 
-    [self traverseSubviews:^(__kindof RNSVGNode *node) {
+    [self traverseSubviews:^(RNSVGNode *node) {
         if ([node isKindOfClass:[RNSVGNode class]]) {
             [node parseReference];
         }