Merge pull request #2083 from framer/fix/svg-scale-attr

Adding support for `attrScale`

Author: mergetron[bot]

packages/framer-motion/src/render/svg/__tests__/use-props.test.ts

@@ -9,6 +9,7 @@ describe("SVG useProps", () => {
                 {
                     attrX: 1,
                     attrY: motionValue(5),
+                    attrScale: 3,
                     cx: 2,
                     style: {
                         x: 3,
@@ -18,6 +19,7 @@ describe("SVG useProps", () => {
                 {
                     attrX: 6,
                     attrY: 10,
+                    attrScale: 4,
                     cx: 7,
                     x: 8,
                     scale: 9,
@@ -30,6 +32,7 @@ describe("SVG useProps", () => {
         expect(result.current).toStrictEqual({
             x: 6,
             y: 10,
+            scale: 4,
             cx: 7,
             style: {},
         })

packages/framer-motion/src/render/svg/utils/__tests__/scrape-motion-values.test.ts

@@ -6,14 +6,17 @@ describe("SVG scrapeMotionValuesFromProps", () => {
         const x = motionValue(0)
         const attrX = motionValue(0)
         const attrY = motionValue(0)
+        const scale = motionValue(0)
+        const attrScale = motionValue(0)
 
         expect(
             scrapeMotionValuesFromProps(
                 {
                     x: attrX,
                     attrY,
+                    scale: attrScale,
                     prev: 0,
-                    style: { x },
+                    style: { x, scale },
                 } as any,
                 {
                     prev: motionValue(1),
@@ -22,7 +25,9 @@ describe("SVG scrapeMotionValuesFromProps", () => {
         ).toEqual({
             attrX,
             attrY,
+            attrScale,
             x,
+            scale,
             prev: 0,
         })
     })

packages/framer-motion/src/render/svg/utils/build-attrs.ts

@@ -14,6 +14,7 @@ export function buildSVGAttrs(
     {
         attrX,
         attrY,
+        attrScale,
         originX,
         originY,
         pathLength,
@@ -63,9 +64,10 @@ export function buildSVGAttrs(
         )
     }
 
-    // Treat x/y not as shortcuts but as actual attributes
+    // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined) attrs.x = attrX
     if (attrY !== undefined) attrs.y = attrY
+    if (attrScale !== undefined) attrs.scale = attrScale
 
     // Build SVG path if one has been defined
     if (pathLength !== undefined) {

packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts

@@ -1,6 +1,7 @@
 import { MotionProps } from "../../../motion/types"
 import { isMotionValue } from "../../../value/utils/is-motion-value"
 import { scrapeMotionValuesFromProps as scrapeHTMLMotionValuesFromProps } from "../../html/utils/scrape-motion-values"
+import { transformPropOrder } from "../../html/utils/transform"
 
 export function scrapeMotionValuesFromProps(
     props: MotionProps,
@@ -11,7 +12,10 @@ export function scrapeMotionValuesFromProps(
     for (const key in props) {
         if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {
             const targetKey =
-                key === "x" || key === "y" ? "attr" + key.toUpperCase() : key
+                transformPropOrder.indexOf(key) !== -1
+                    ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
+                    : key
+
             newValues[targetKey] = props[key]
         }
     }