diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json
index 751fd5ba37..2259ab5082 100644
--- a/packages/framer-motion/package.json
+++ b/packages/framer-motion/package.json
@@ -72,15 +72,15 @@
"bundlesize": [
{
"path": "./dist/size-rollup-motion.js",
- "maxSize": "28.9 kB"
+ "maxSize": "29 kB"
},
{
"path": "./dist/size-rollup-m.js",
- "maxSize": "4.7 kB"
+ "maxSize": "4.75 kB"
},
{
"path": "./dist/size-rollup-dom-animation.js",
- "maxSize": "14.13 kB"
+ "maxSize": "14.2kB"
},
{
"path": "./dist/size-rollup-dom-max.js",
diff --git a/packages/framer-motion/src/motion/__tests__/component-svg.test.tsx b/packages/framer-motion/src/motion/__tests__/component-svg.test.tsx
index ce14ef9be1..4978bbceff 100644
--- a/packages/framer-motion/src/motion/__tests__/component-svg.test.tsx
+++ b/packages/framer-motion/src/motion/__tests__/component-svg.test.tsx
@@ -88,6 +88,23 @@ describe("SVG", () => {
render()
})
+ test("doesn't read viewBox as '0 0 0 0'", () => {
+ const Component = () => {
+ return (
+
+ )
+ }
+ const { container } = render()
+ expect(container.firstChild as Element).toHaveAttribute(
+ "viewBox",
+ "0 0 100 100"
+ )
+ })
+
test("animates viewBox", () => {
const Component = () => {
return (
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 5cf1bcd6d5..e73538770d 100644
--- a/packages/framer-motion/src/render/svg/utils/build-attrs.ts
+++ b/packages/framer-motion/src/render/svg/utils/build-attrs.ts
@@ -27,13 +27,15 @@ export function buildSVGAttrs(
transformTemplate?: MotionProps["transformTemplate"]
) {
buildHTMLStyles(state, latest, options, transformTemplate)
-
+ console.log(state.attrs, state.style)
/**
* For svg tags we just want to make sure viewBox is animatable and treat all the styles
* as normal HTML tags.
*/
if (isSVGTag) {
- state.attrs.viewBox = state.style.viewBox
+ if (state.style.viewBox) {
+ state.attrs.viewBox = state.style.viewBox
+ }
return
}
diff --git a/packages/framer-motion/src/render/svg/utils/render.ts b/packages/framer-motion/src/render/svg/utils/render.ts
index b643c874e3..ece26325a5 100644
--- a/packages/framer-motion/src/render/svg/utils/render.ts
+++ b/packages/framer-motion/src/render/svg/utils/render.ts
@@ -14,6 +14,7 @@ export function renderSVG(
renderHTML(element as any, renderState, undefined, projection)
for (const key in renderState.attrs) {
+ console.log(key, renderState.attrs)
element.setAttribute(
!camelCaseAttributes.has(key) ? camelToDash(key) : key,
renderState.attrs[key] as string