diff --git a/packages/framer-motion/src/render/svg/__tests__/use-props.test.ts b/packages/framer-motion/src/render/svg/__tests__/use-props.test.ts index ec92eff4bf..543a8b4a8b 100644 --- a/packages/framer-motion/src/render/svg/__tests__/use-props.test.ts +++ b/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: {}, }) diff --git a/packages/framer-motion/src/render/svg/utils/__tests__/scrape-motion-values.test.ts b/packages/framer-motion/src/render/svg/utils/__tests__/scrape-motion-values.test.ts index 50ec5d3ee6..3f18bcd12b 100644 --- a/packages/framer-motion/src/render/svg/utils/__tests__/scrape-motion-values.test.ts +++ b/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, }) }) diff --git a/packages/framer-motion/src/render/svg/utils/build-attrs.ts b/packages/framer-motion/src/render/svg/utils/build-attrs.ts index 2c09a7c435..1ffb25fa92 100644 --- a/packages/framer-motion/src/render/svg/utils/build-attrs.ts +++ b/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) { diff --git a/packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts b/packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts index 1a8d705fb3..f479510830 100644 --- a/packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts +++ b/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] } }