Feature: SVG Scaling to parent

[mix3d]

Using gristow@fbf3c78 and the SVG interactions defined in #371 , to create a staff that scales to it's parent size, without needing to call renderer.resize() all the time.

Yes this won't be compatible with Canvas, but SVG is superior anyways soooo...

[davidedelvento]

To plan my usage of vexflow, I would like know if there is any plan to implement this in vexflow sometimes soon, or if I should find my own workarounds.
Thanks!

[mix3d]

I posted that 6 months ago... You might need to fork.

[davidedelvento]

@mix3d Thanks. I did notice the date, but sometimes conversations happen on a side channel, so I wanted to check.

[ronyeh]

Can you clarify what you mean? Do you mean that the VexFlow SVGContext is on a responsive webpage, so that as the parent DOM element resizes, the VexFlow score will also resize appropriately? Do you have a demo of it working? (Since this is almost 2 years ago now, I assume you might have already implemented it on your own fork.)

[davidedelvento]

I needed simply the staff to fill the available size, on a phone/table. I eventually had it to work just using what was available. I don't remember anything else since this is so old (I am not currently working on that project, at the moment)

[rvilarl]

If we draw a background element this could help

https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container

[nathan-kerr]

I've read the docs/issues (including https://github.com/0xfe/vexflow/wiki/Understanding-Renderer-&-Context) trying to figure out how to scale the SVG to parent, but I'm still struggling.

Please implement this feature and add further documentation showing how to manipulate the SVG for common usage. The fiddles could demonstrate scaling the score (with parent, and separately) as well as centering it.