<svg> attribute viewBox: Expected number, "0 0 NaN NaN".

2,785 views
Skip to first unread message

dz902

unread,
May 23, 2016, 5:12:31 AM5/23/16
to vexflow
I was trying to make a note model that is always in-sync with Vex Flow rendering (hope this will be somehow supported in the future version), and did this:

var ctx = this.renderer.getContext();
ctx.clear();

Then got this:

<svg> attribute viewBox: Expected number, "0 0 NaN NaN".

The result was alright and the SVG was updated (redrawn), but this error is strange. Any idea why did it happen? Stacktrace is like context.clear -> scale -> setViewBox -> Error.

Really hope vexflow can support model syncing, or at least provide some hooks for plugging in. Juggling between every piece of source code is really kill me (and probably many other people like me).

cortez

unread,
May 23, 2016, 12:30:40 PM5/23/16
to vexflow
I have had this problem myself. I believe it's because when you clear this messes up the viewBox, and I fixed it by calling ctx.svg.setAttribute("preserveAspectRatio", "xMinYMin meet").

You could also try calling ctx.scale(1,1).

C

dz902

unread,
May 24, 2016, 7:14:48 AM5/24/16
to vexflow
Thanks for the reply.

ctx.scale is in the stacktrace so calling it will generate another error.

setAttribute does not work also.

Tracing in the code I found ctx.resize is the only place where width and height are set, the only place it was called is buildContext, wrapped only in Renderer.getSVGContext function, but I couldn't find anywhere this function was used (even using breakpoint in browser). Really confused.

I also tried manually set width and height with ctx.svg.width/height but it seems the numbers need to be exact or strange rendering will happen.

dz902

unread,
May 24, 2016, 7:19:41 AM5/24/16
to vexflow
Just solved this problem by manually setting

ctx.width = ctx.svg.clientWidth

...and same for the height. This should be a bug.

Mohit Muthanna Cheppudira

unread,
May 24, 2016, 5:59:04 PM5/24/16
to vexflow
Thanks. Looks like we should put this in renderer.resize().

--
--
You received this message because you are subscribed to the Google
Groups "vexflow" group.
To post to this group, send email to vex...@googlegroups.com
To unsubscribe from this group, send email to
vexflow+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/vexflow?hl=en

---
You received this message because you are subscribed to the Google Groups "vexflow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Mohit Muthanna [mohit (at) muthanna (uhuh) com]
Reply all
Reply to author
Forward
0 new messages