fix: handle setting transform attribute on clipPath, fixes #1152

Author: msand

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

@@ -333,6 +333,7 @@ public void setResponsible(boolean responsible) {
             if (mClipNode != null) {
                 Path clipPath = mClipNode.mClipRule == CLIP_RULE_EVENODD ? mClipNode.getPath(canvas, paint) :
                         mClipNode.getPath(canvas, paint, Region.Op.UNION);
+                clipPath.transform(mClipNode.mMatrix);
                 switch (mClipNode.mClipRule) {
                     case CLIP_RULE_EVENODD:
                         clipPath.setFillType(Path.FillType.EVEN_ODD);

ios/RNSVGNode.m

@@ -314,7 +314,9 @@ - (CGPathRef)getClipPath:(CGContextRef)context
         if (_cachedClipPath) {
             CGPathRelease(_cachedClipPath);
         }
-        _cachedClipPath = CGPathRetain([_clipNode getPath:context]);
+        CGAffineTransform transform = _clipNode.matrix;
+        _cachedClipPath = CGPathCreateCopyByTransformingPath([_clipNode getPath:context], &transform);
+        CGPathRetain(_cachedClipPath);
         if (_clipMask) {
             CGImageRelease(_clipMask);
         }

src/elements/ClipPath.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
 import extractClipPath from '../lib/extract/extractClipPath';
+import { TransformProps } from '../lib/extract/types';
 import Shape from './Shape';
 
 export default class ClipPath extends Shape<{
   id?: string;
   clipPath?: string;
   clipRule?: 'evenodd' | 'nonzero';
+  transform?: number[] | string | TransformProps;
 }> {
   static displayName = 'ClipPath';
 

src/lib/extract/extractClipPath.ts

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

src/lib/extract/types.ts

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