fix: improve handling of transform attribute on clipPath, fixes #1152

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

@@ -334,6 +334,7 @@ abstract public class VirtualView extends ReactViewGroup {
                 Path clipPath = mClipNode.mClipRule == CLIP_RULE_EVENODD ? mClipNode.getPath(canvas, paint) :
                         mClipNode.getPath(canvas, paint, Region.Op.UNION);
                 clipPath.transform(mClipNode.mMatrix);
+                clipPath.transform(mClipNode.mTransform);
                 switch (mClipNode.mClipRule) {
                     case CLIP_RULE_EVENODD:
                         clipPath.setFillType(Path.FillType.EVEN_ODD);

ios/RNSVGNode.m

@@ -314,7 +314,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
         if (_cachedClipPath) {
             CGPathRelease(_cachedClipPath);
         }
-        CGAffineTransform transform = _clipNode.matrix;
+        CGAffineTransform transform = CGAffineTransformConcat(_clipNode.matrix, _clipNode.transforms);
         _cachedClipPath = CGPathCreateCopyByTransformingPath([_clipNode getPath:context], &transform);
         CGPathRetain(_cachedClipPath);
         if (_clipMask) {

src/elements/ClipPath.tsx

@@ -1,23 +1,19 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import extractClipPath from '../lib/extract/extractClipPath';
+import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
-import { TransformProps } from '../lib/extract/types';
 import Shape from './Shape';
 
-export default class ClipPath extends Shape<{
+export default class ClipPath extends Shape<{}> {
-  id?: string;
-  clipPath?: string;
-  clipRule?: 'evenodd' | 'nonzero';
-  transform?: number[] | string | TransformProps;
-}> {
   static displayName = 'ClipPath';
 
   render() {
     const { props } = this;
-    const { id, children } = props;
     return (
-      <RNSVGClipPath ref={this.refMethod} name={id} {...extractClipPath(props)}>
+      <RNSVGClipPath
-        {children}
+        ref={this.refMethod}
+        {...extractProps(propsAndStyles(props), this)}
+      >
+        {props.children}
       </RNSVGClipPath>
     );
   }

src/lib/extract/extractClipPath.ts

@@ -1,6 +1,5 @@
 import { idPattern } from '../util';
 import { ClipProps } from './types';
-import extractTransform from './extractTransform';
 
 const clipRules: { evenodd: number; nonzero: number } = {
   evenodd: 0,
@@ -8,11 +7,10 @@ const clipRules: { evenodd: number; nonzero: number } = {
 };
 
 export default function extractClipPath(props: ClipProps) {
-  const { clipPath, clipRule, transform } = props;
+  const { clipPath, clipRule } = props;
   const extracted: {
     clipPath?: string;
     clipRule?: number;
-    matrix?: number[];
   } = {};
 
   if (clipRule) {
@@ -33,9 +31,5 @@ export default function extractClipPath(props: ClipProps) {
     }
   }
 
-  if (transform) {
-    extracted.matrix = extractTransform(transform);
-  }
-
   return extracted;
 }

src/lib/extract/types.ts

@@ -92,5 +92,4 @@ export type StrokeProps = {
 export type ClipProps = {
   clipPath?: string;
   clipRule?: 'evenodd' | 'nonzero';
-  transform?: number[] | string | TransformProps;
 };