Fix issue 1450

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

@@ -77,4 +77,50 @@ describe("SVG useProps", () => {
             style: {},
         })
     })
+
+    test("should keep offsetDistance as CSS style, not SVG attribute", () => {
+        const { result } = renderHook(() =>
+            useSVGProps(
+                { style: {} } as any,
+                {
+                    offsetDistance: "50%",
+                    offsetPath: "path('M 0 0 L 100 100')",
+                },
+                false,
+                "circle"
+            )
+        )
+
+        expect(result.current).toStrictEqual({
+            style: {
+                offsetDistance: "50%",
+                offsetPath: "path('M 0 0 L 100 100')",
+            },
+        })
+    })
+
+    test("should keep all CSS motion path properties as styles", () => {
+        const { result } = renderHook(() =>
+            useSVGProps(
+                { style: {} } as any,
+                {
+                    offsetDistance: "25%",
+                    offsetPath: "path('M 0 0 L 100 100')",
+                    offsetRotate: "auto",
+                    offsetAnchor: "center",
+                },
+                false,
+                "rect"
+            )
+        )
+
+        expect(result.current).toStrictEqual({
+            style: {
+                offsetDistance: "25%",
+                offsetPath: "path('M 0 0 L 100 100')",
+                offsetRotate: "auto",
+                offsetAnchor: "center",
+            },
+        })
+    })
 })

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

@@ -4,6 +4,16 @@ import { ResolvedValues } from "../../types"
 import { SVGRenderState } from "../types"
 import { buildSVGPath } from "./path"
 
+/**
+ * CSS Motion Path properties that should remain as CSS styles on SVG elements.
+ */
+const cssMotionPathProperties = [
+    "offsetDistance",
+    "offsetPath",
+    "offsetRotate",
+    "offsetAnchor",
+]
+
 /**
  * Build SVG visual attributes, like cx and style.transform
  */
@@ -62,6 +72,13 @@ export function buildSVGAttrs(
         delete attrs.transformBox
     }
 
+    for (const key of cssMotionPathProperties) {
+        if (attrs[key] !== undefined) {
+            style[key] = attrs[key]
+            delete attrs[key]
+        }
+    }
+
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined) attrs.x = attrX
     if (attrY !== undefined) attrs.y = attrY