SVG Rendering Discrepancy with props like fill="url(#paint4_linear_10_58)"

[amit-chaudhari1]

Describe the bug
A clear and concise description of what the bug is.
Discrepancy in rendering some SVG's.
SVG's with a fill="url(#paint5_linear_10_58)" or similar seem end up raising some errors. while It is completely valid for other platforms.

To Reproduce
Steps to reproduce the behavior
or a code snippet containing the scene that causes the problem:

1. make a simple scene that adds the suspect SVG to the scene:
2. run the animation and witness the error

import image from '../../assets/haha.svg?raw';

export default makeScene2D(function* (view) {
  const node = createRef<SVG>();

  view.add(<SVG ref={node} svg={image} />);
  yield* waitFor(1);
});

Example of Suspect SVG:

( I was trying to conduct a test experiment with the svg trying out MotionCanvas )

Expected behavior
I was expecting it to be able to render proplerly. but it throws an error at the start of the animation loop. I think the problem might be how it parses the svg.

Console errors

The problem occurred here:
at Color3 (/node_modules/.vite/deps/chunk-2PCMWUFX.js:127:17)
at Path.canvasStyleParser (/node_modules/.vite/deps/@motion-canvas_2d.js:45728:10)
at SignalContext.parse (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5274:17)
at SignalContext.setter (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5291:24)
at SignalContext.set (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5277:21)
at SignalContext.invoke (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5322:19)
at initializeSignals (/node_modules/.vite/deps/@motion-canvas_2d.js:45404:7)
at new _Node (/node_modules/.vite/deps/@motion-canvas_2d.js:46067:5)
at new _Layout (/node_modules/.vite/deps/@motion-canvas_2d.js:47171:5)
at new Shape (/node_modules/.vite/deps/@motion-canvas_2d.js:47711:5)
at new Curve (/node_modules/.vite/deps/@motion-canvas_2d.js:47838:5)
at new Path (/node_modules/.vite/deps/@motion-canvas_2d.js:50343:5)
at _SVG.buildShape (/node_modules/.vite/deps/@motion-canvas_2d.js:50809:14)
at (/node_modules/.vite/deps/@motion-canvas_2d.js:50799:42)
at _SVG.buildDocument (/node_modules/.vite/deps/@motion-canvas_2d.js:50799:25)
at _SVG.parseSVG (/node_modules/.vite/deps/@motion-canvas_2d.js:50820:17)
at _SVG.document (/node_modules/.vite/deps/@motion-canvas_2d.js:50922:19)
at ComputedContext.invoke (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5543:26)
at _SVG.wrapperScale (/node_modules/.vite/deps/@motion-canvas_2d.js:50911:44)
at ComputedContext.invoke (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5543:26)
at SignalContext.current (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5499:36)
at SignalContext.getter (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5304:37)
at SignalContext.get (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5296:28)
at SignalContext.invoke (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5319:19)
at _Node.localToParent (/node_modules/.vite/deps/@motion-canvas_2d.js:46132:33)
at ComputedContext.invoke (/node_modules/.vite/deps/chunk-2PCMWUFX.js:5543:26)
at _Node.transformContext (/node_modules/.vite/deps/@motion-canvas_2d.js:46743:25)
at _Node.render (/node_modules/.vite/deps/@motion-canvas_2d.js:46671:10)
at _SVG.drawChildren (/node_modules/.vite/deps/@motion-canvas_2d.js:46709:13)
at _SVG.draw (/node_modules/.vite/deps/@motion-canvas_2d.js:47735:10)
at _SVG.render (/node_modules/.vite/deps/@motion-canvas_2d.js:46690:12)
at _View2D.drawChildren (/node_modules/.vite/deps/@motion-canvas_2d.js:46709:13)
at _View2D.draw (/node_modules/.vite/deps/@motion-canvas_2d.js:47735:10)
at _View2D.render (/node_modules/.vite/deps/@motion-canvas_2d.js:46690:12)
at _View2D.render (/node_modules/.vite/deps/@motion-canvas_2d.js:49017:11)
at Scene2D.draw (/node_modules/.vite/deps/@motion-canvas_2d.js:51637:20)
at (/node_modules/.vite/deps/chunk-2PCMWUFX.js:4230:31)
at Scene2D.execute (/node_modules/.vite/deps/chunk-2PCMWUFX.js:4377:16)
at Scene2D.render (/node_modules/.vite/deps/chunk-2PCMWUFX.js:4230:12)
at async Stage.render (/node_modules/.vite/deps/chunk-RFXD4ZQ3.js:1030:5)
at async (/node_modules/.vite/deps/@motion-canvas_ui.js:51769:5)
at async AsyncEventDispatcher.dispatch (/node_modules/.vite/deps/chunk-DJ3NXPZ4.js:57:5)
at async Player.run (/node_modules/.vite/deps/chunk-RFXD4ZQ3.js:956:5)
at async (/node_modules/.vite/deps/chunk-RFXD4ZQ3.js:969:11)

there's a few more of such errors but they all are about different props in the svg material.

Package versions:

• core: 3.11.0
• two: 3.11.0
• ui: 3.11.0
• vitePlugin: 3.11.0

Additional context
I think this is about the way we are parsing SVG, I'll try to investigate further and add my findings to this discussion.
like it tries to look for a absolute color. and it gets a var in place of it. so it gives up on rendering the thing.