Fix SVG transform animations not applied without other SVG attributes (#3081)

The isHTMLElement() check used "offsetHeight" in element, which returns
true for SVG elements in Chrome (where offsetHeight exists on SVGElement
prototype, though deprecated). This caused supportsBrowserAnimation() to
incorrectly route SVG transform animations through WAAPI instead of the
JS animation path, bypassing the SVG render pipeline that sets
transformBox and transformOrigin.

Add an exclusion for SVG elements via "ownerSVGElement" in element.

Fixes #3081

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: mattgperry

dev/react/src/tests/svg-transform-animation.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react"
+import { motion } from "framer-motion"
+
+/**
+ * Test for issue #3081: SVG transform animations should work
+ * even when other SVG attributes are not also animated.
+ */
+export function App() {
+    const [animate, setAnimate] = useState(false)
+
+    return (
+        <>
+            <motion.svg
+                id="svg-root"
+                width={200}
+                height={200}
+                initial={
+                    animate
+                        ? undefined
+                        : { rotate: 10 }
+                }
+                animate={
+                    animate
+                        ? { rotate: 0 }
+                        : undefined
+                }
+                transition={{ duration: 0.1, ease: "linear" }}
+            >
+                <motion.g
+                    id="svg-g"
+                    transition={{ duration: 0.1, ease: "linear" }}
+                    initial={
+                        animate
+                            ? undefined
+                            : {
+                                  transform: "matrix(1,0,0,1, 50, 50)",
+                                  stroke: "#ff0000",
+                              }
+                    }
+                    animate={
+                        animate
+                            ? {
+                                  transform: "matrix(1, 0, 0, 1, 0, 0)",
+                                  stroke: "#00ffff",
+                              }
+                            : undefined
+                    }
+                >
+                    <motion.rect
+                        id="svg-rect"
+                        x={0}
+                        y={0}
+                        width={30}
+                        height={30}
+                        strokeWidth="5px"
+                        initial={
+                            animate
+                                ? undefined
+                                : {
+                                      transform: "matrix(2,0,0,2, 0, 0)",
+                                      fill: "#ffff00",
+                                  }
+                        }
+                        animate={
+                            animate
+                                ? {
+                                      transform: "matrix(1, 0, 0, 1, 0, 0)",
+                                      fill: "#ff00ff",
+                                  }
+                                : undefined
+                        }
+                        transition={{ duration: 0.1, ease: "linear" }}
+                    />
+                </motion.g>
+            </motion.svg>
+            <button id="animate" onClick={() => setAnimate(true)}>
+                Animate
+            </button>
+        </>
+    )
+}

packages/framer-motion/cypress/integration/svg-transform-animation.ts

@@ -0,0 +1,45 @@
+describe("SVG transform animation (#3081)", () => {
+    it("Applies transform animation without other SVG attributes animated", () => {
+        cy.visit("?test=svg-transform-animation")
+            .wait(50)
+            .get("#svg-rect")
+            .should(($rect: any) => {
+                const rect = $rect[0] as SVGRectElement
+                // Before animation, transform should be the initial matrix(2,0,0,2,0,0)
+                expect(rect.style.transform).to.contain("matrix")
+            })
+            .get("#animate")
+            .click()
+            .wait(300)
+            .get("#svg-rect")
+            .should(($rect: any) => {
+                const rect = $rect[0] as SVGRectElement
+                const transform = rect.style.transform
+                // After animation, transform should be the final identity matrix
+                expect(transform).to.not.equal("")
+                expect(transform).to.not.equal("none")
+                expect(transform).to.contain("matrix")
+                const match = transform.match(/matrix\(([^)]+)\)/)
+                expect(match).to.not.be.null
+                const values = match![1].split(",").map(Number)
+                // Identity matrix: 1, 0, 0, 1, 0, 0
+                expect(values[0]).to.be.closeTo(1, 0.1)
+                expect(values[3]).to.be.closeTo(1, 0.1)
+            })
+            .get("#svg-g")
+            .should(($g: any) => {
+                const g = $g[0] as SVGGElement
+                const transform = g.style.transform
+                expect(transform).to.not.equal("")
+                expect(transform).to.not.equal("none")
+                expect(transform).to.contain("matrix")
+            })
+            .get("#svg-root")
+            .should(($svg: any) => {
+                const svg = $svg[0] as SVGSVGElement
+                const transform = svg.style.transform
+                // motion.svg treats transforms like HTML (rotate builds to "none" at 0deg)
+                expect(transform).to.not.equal("")
+            })
+    })
+})

packages/motion-dom/src/utils/__tests__/is-html-element.test.ts

@@ -19,6 +19,20 @@ describe("isHTMLElement", () => {
         expect(isHTMLElement(element)).toBe(false)
     })
 
+    it("should return false for inner SVG elements", () => {
+        const rect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "rect"
+        )
+        expect(isHTMLElement(rect)).toBe(false)
+
+        const g = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "g"
+        )
+        expect(isHTMLElement(g)).toBe(false)
+    })
+
     it("should return false for a null element", () => {
         const element = null
         expect(isHTMLElement(element)).toBe(false)

packages/motion-dom/src/utils/is-html-element.ts

@@ -5,5 +5,9 @@ import { isObject } from "motion-utils"
  * that works across iframes
  */
 export function isHTMLElement(element: unknown): element is HTMLElement {
-    return isObject(element) && "offsetHeight" in element
+    return (
+        isObject(element) &&
+        "offsetHeight" in element &&
+        !("ownerSVGElement" in element)
+    )
 }