I'm using PianoRollSVGVisualizer to generate an SVG image into a dynamically created SVGSVGElement and then converting this to a data URL by getting the outerHTML from the element. This doesn't work directly because of a line break character in the fill attribute, which gets exported as fill="rgba(8, 41, 64, 1)".
I tracked this down to visualizer.ts where there are two occurences of this:
const fill =
`rgba(${isActive ? this.config.activeNoteRGB : this.config.noteRGB},
${opacity})`;
It looks like the coding style calls for 80 character lines, hence the line break. Perhaps this can be handled with concatenation to avoid the line break and still keep the 80 character limit?
It's a minor issue, but it stumped me for a while and I think it's a pretty easy fix. For the time being I've worked around it by using svgImage.outerHTML.replace(/ /g,''). Crude but effective ;)
I'm using
PianoRollSVGVisualizerto generate an SVG image into a dynamically createdSVGSVGElementand then converting this to a data URL by getting theouterHTMLfrom the element. This doesn't work directly because of a line break character in the fill attribute, which gets exported asfill="rgba(8, 41, 64, 1)".I tracked this down to
visualizer.tswhere there are two occurences of this:It looks like the coding style calls for 80 character lines, hence the line break. Perhaps this can be handled with concatenation to avoid the line break and still keep the 80 character limit?
It's a minor issue, but it stumped me for a while and I think it's a pretty easy fix. For the time being I've worked around it by using
svgImage.outerHTML.replace(/ /g,''). Crude but effective ;)Thanks for sharing this great project!