fix: scale path markers so they match ios (#2018)

PR adding scaling of markers of path in order to make them behave the same as on iOS. Also bumped the versions of agp and spotless.

Example/src/examples/Markers.tsx

@@ -8,9 +8,10 @@ import {
   Ellipse,
   Line,
   Polygon,
+  Path,
 } from 'react-native-svg';
 
-class CircleExample extends Component {
+class EllipseExample extends Component {
   static title = 'Circle shaped marker on ellipse';
   render() {
     return (
@@ -47,7 +48,7 @@ class CircleExample extends Component {
   }
 }
 
-class StrokeCircle extends Component {
+class LineExample extends Component {
   static title = 'Triangle shaped marker on line';
   render() {
     return (
@@ -81,7 +82,7 @@ class StrokeCircle extends Component {
   }
 }
 
-class StrokeOpacityCircle extends Component {
+class CircleExample extends Component {
   static title = 'Rect shaped marker on circle';
   render() {
     return (
@@ -111,7 +112,7 @@ class StrokeOpacityCircle extends Component {
   }
 }
 
-class PieCircle extends Component {
+class RectExample extends Component {
   static title = 'Ellipse shaped marker on rect';
   render() {
     return (
@@ -119,7 +120,7 @@ class PieCircle extends Component {
         <Defs>
           <Marker
             id="selection"
-            markerUnits="userSpaceOnUse"
+            markerUnits="strokeWidth"
             refX="0"
             refY="0"
             orient="auto">
@@ -141,7 +142,7 @@ class PieCircle extends Component {
           height="30"
           fill="none"
           stroke="blue"
-          strokeWidth="5"
+          strokeWidth="1"
           marker="url(#selection)"
         />
       </Svg>
@@ -149,11 +150,69 @@ class PieCircle extends Component {
   }
 }
 
+class PathExample extends Component {
+  static title = 'Path shaped marker on line';
+  render() {
+    return (
+      <Svg height="200" width="400" viewBox="0 0 300 100">
+        <Defs>
+          <Marker
+            id="arrow"
+            // viewBox="0 0 10 10"
+            refX="5"
+            refY="5"
+            markerWidth="6"
+            markerHeight="6"
+            // orient="auto-start-reverse"
+          >
+            <Path fill="blue" d="M 0 0 L 10 5 L 0 10 z" />
+          </Marker>
+        </Defs>
+        <Line
+          x1="10"
+          y1="10"
+          x2="90"
+          y2="90"
+          stroke="black"
+          strokeWidth="3"
+          markerEnd="url(#arrow)"
+        />
+      </Svg>
+    );
+  }
+}
+
 const icon = (
-  <Svg height="30" width="30" viewBox="0 0 20 20">
-    <Circle cx="10" cy="10" r="8" stroke="purple" strokeWidth="1" fill="pink" />
+  <Svg height="30" width="30" viewBox="0 0 3000 2500">
+    <Defs>
+      <Marker
+        id="Triangle"
+        // viewBox="0 0 10 10"
+        refX="0"
+        refY="5"
+        markerUnits="strokeWidth"
+        markerWidth="4"
+        markerHeight="3"
+        orient="auto">
+        <Path fill="blue" d="M 0 0 L 10 5 L 0 10 z" />
+      </Marker>
+    </Defs>
+    <Path
+      d="M 1000 750 L 2000 750 L 2500 1250"
+      fill="none"
+      stroke="black"
+      strokeWidth="70"
+      markerEnd="url(#Triangle)"
+      markerStart="url(#Triangle)"
+    />
   </Svg>
 );
 
-const samples = [CircleExample, StrokeCircle, StrokeOpacityCircle, PieCircle];
+const samples = [
+  EllipseExample,
+  LineExample,
+  CircleExample,
+  RectExample,
+  PathExample,
+];
 export {icon, samples};