Merge pull request #124 from motiondivision/fix/svg-style

fix: sVG style not update

Author: rick-hup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-motion",
-  "version": "0.13.0",
+  "version": "0.13.1-alpha.0",
   "private": true,
   "packageManager": "[email protected]+sha1.8bfdb6d72b4d5fdf87d21d27f2bfbe2b21dd2629",
   "description": "",

packages/motion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.13.0",
+  "version": "0.13.1-alpha.0",
   "description": "",
   "author": "",
   "license": "MIT",

packages/motion/src/components/__tests__/svg.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/vue'
+import { Motion } from '@/components'
+import { motionValue } from 'framer-motion/dom'
+import { nextTick } from 'vue'
+import { delay } from '@/shared/test'
+
+describe('row-value', () => {
+  it('should render initial value', async () => {
+    const opacity = motionValue(0)
+    const stroke = motionValue('red')
+    const wrapper = render(Motion, {
+      props: {
+        as: 'path',
+        style: {
+          opacity,
+          stroke,
+        },
+      },
+      attrs: {
+        'data-testid': 'path',
+      },
+    })
+    await nextTick()
+    const path = wrapper.getByTestId('path')
+    expect(path.style.opacity).toBeFalsy()
+    expect(path.style.stroke).toBeFalsy()
+    expect(path.getAttribute('stroke')).toBe('red')
+    expect(path.getAttribute('opacity')).toBe('0')
+    opacity.set(1)
+    stroke.set('blue')
+    await delay(100)
+    expect(path.style.opacity).toBeFalsy()
+    expect(path.style.stroke).toBeFalsy()
+    expect(path.getAttribute('stroke')).toBe('blue')
+    expect(path.getAttribute('opacity')).toBe('1')
+  })
+})

packages/motion/src/components/motion/Motion.vue

@@ -7,6 +7,7 @@ import { checkMotionIsHidden } from './utils'
 import type { AsTag, ComponentProps, ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '@/types'
 import { useMotionConfig } from '../motion-config/context'
 import { getMotionElement } from '../hooks/use-motion-elm'
+import type { DOMKeyframesDefinition } from 'motion-dom'
 </script>
 
 <script setup lang="ts" generic="T extends AsTag = 'div', K = unknown">
@@ -77,7 +78,7 @@ const props = withDefaults(defineProps<ComBindProps & MotionProps<T, K>>(), {
     return focus
   },
 } as any) as MotionProps<T>
-const animatePresenceContext = injectAnimatePresence({ })
+const animatePresenceContext = injectAnimatePresence({})
 const parentState = injectMotion(null)
 const attrs = useAttrs()
 const layoutGroup = injectLayoutGroup({} as any)
@@ -163,9 +164,12 @@ function getAttrs() {
     ...(isSVG ? {} : state.visualElement.latestValues),
   }
   if (isSVG) {
-    const { attributes, style } = convertSvgStyleToAttributes(state.isMounted() ? state.target : state.baseTarget)
+    const { attributes, style } = convertSvgStyleToAttributes({
+      ...(state.isMounted() ? state.target : state.baseTarget),
+      ...styleProps,
+    } as DOMKeyframesDefinition)
     Object.assign(attrsProps, attributes)
-    Object.assign(styleProps, style)
+    styleProps = style
   }
   if (props.drag && props.dragListener !== false) {
     Object.assign(styleProps, {
@@ -178,12 +182,7 @@ function getAttrs() {
     })
   }
 
-  styleProps = createStyles({
-    ...styleProps,
-    ...props.style,
-  })
-
-  attrsProps.style = styleProps
+  attrsProps.style = createStyles(styleProps)
   return attrsProps
 }
 

packages/motion/src/state/style.ts

@@ -1,8 +1,9 @@
-import type { DOMKeyframesDefinition } from 'framer-motion'
+import type { DOMKeyframesDefinition, ResolvedValues } from 'framer-motion'
 import { isCssVar, isNumber } from './utils'
 import { buildTransformTemplate, isTransform, transformAlias, transformDefinitions } from './transform'
 import { isMotionValue } from '@/utils'
 import type { MotionStyle } from '@/types'
+import { px } from '@/value/types/numbers/units'
 
 type MotionStyleKey = Exclude<
   keyof CSSStyleDeclaration,
@@ -83,15 +84,12 @@ const SVG_STYLE_TO_ATTRIBUTES = {
   cy: true,
   r: true,
   d: true,
-  x: true,
-  y: true,
   x1: true,
   y1: true,
   x2: true,
   y2: true,
   points: true,
   pathLength: true,
-  transform: true,
   viewBox: true,
   width: true,
   height: true,
@@ -116,22 +114,36 @@ const SVG_STYLE_TO_ATTRIBUTES = {
   vectorEffect: true,
 } as const
 
+function buildSVGPath(
+  attrs: ResolvedValues,
+  length: number,
+  spacing = 1,
+  offset = 0,
+) {
+  attrs.pathLength = 1
+  // Build the dash offset
+  attrs['stroke-dashoffset'] = px.transform(-offset)
+
+  // Build the dash array
+  const pathLength = px.transform!(length)
+  const pathSpacing = px.transform!(spacing)
+  attrs['stroke-dasharray'] = `${pathLength} ${pathSpacing}`
+}
 export function convertSvgStyleToAttributes(keyframes?: MotionStyle | DOMKeyframesDefinition) {
   const attributes: Record<string, any> = {}
   const styleProps: Record<string, any> = {}
-
   for (const key in keyframes as any) {
     if (key in SVG_STYLE_TO_ATTRIBUTES) {
-      const attrKey = SVG_STYLE_TO_ATTRIBUTES[key as keyof typeof SVG_STYLE_TO_ATTRIBUTES]
-      const attrName = typeof attrKey === 'string' ? attrKey : key
       const value = keyframes[key]
-      attributes[attrName] = isMotionValue(value) ? value.get() : value
+      attributes[key] = isMotionValue(value) ? value.get() : value
     }
     else {
       styleProps[key] = keyframes[key]
     }
   }
-
+  if (attributes.pathLength) {
+    buildSVGPath(attributes, attributes.pathLength, attributes.pathSpacing, attributes.pathOffset)
+  }
   return {
     attributes,
     style: styleProps,

packages/plugins/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugins",
-  "version": "0.13.0",
+  "version": "0.13.1-alpha.0",
   "private": true,
   "description": "",
   "author": "",