[MEI-L] Verovio - add svg elements at runtime

Sun Jun 7 11:36:19 CEST 2015

Dear MEI List,

I have a question concerning adding svg elements at runtime in the
Javascript version of Verovio. Sorry for this question is not strictly
related to MEI, but I think most Verovio users come from the MEI
community. (And there is no Verovio mailinglist as far as I see.)

I generate some Plaine&Easy Code that is displed by Verovio. Now my
goal is to add a text element above each measure. This is what I have
done so far:

    /* some example pae music */
    data = "@clef:F-4";
    data += "@keysig:\n";
    data += "@timesig:4/4\n";
    data += "@data:,8G,4.A'4C'4C}/'2G{,8B'8xC}'4D}/";

    var vrvToolkit = new verovio.toolkit();
    var svg = vrvToolkit.renderData(data, JSON.stringify({
                                                inputFormat: 'pae',
                                                pageWidth: 800*2,
                                                scale: 40 }) );

    /* this works fine and displays very nicely rendered music*/

    /* first get the lowest y value of all notes */
    var yvals = $("g.note use").map(function() {
      return parseFloat( $(this).attr("y"), 10 ) ;
    var lowest_y = (Math.min.apply(Math, yvals) - 500.0).toString();

    /* now add a chord label above the first note of each measure*/
    var chords = ["C major", "D minor"];
    $("g.measure").map(function(index) {
      var chordname = chords[index];
      var fnote = $($(this).find("g.note:first")).find("use:first");
      var text_node = '<g> <text x="' + $(fnote).attr("x") + '" y="' +
lowest_y + '" height="720px" width="720px" style="font-size:20em">' +
chordname + '</text> </g>';
        $("svg svg").prepend(text_node);

The result does not show any chord labels. However, if I copy the
resulting SVG and save it as a standalone SVG file, my browser shows
the chord labels. So I think it is supposed to work like this. How can
it be achieved that the text shows up in embeded svg at runetime?

Thanks for any ideas and suggestions, also thanks alot for Verovio!

Too bad I couldn't be at MEC2015, but I heard it has been a great event!



Frank Zalkow
Rintheimer Str. 58
76131 Karlsruhe

Web:   www.frank-zalkow.de
Mail:  frank_zalkow at web.de
Phone: +49 172 715 7995

More information about the mei-l mailing list