<html><head><meta http-equiv="Content-Type" content="text/html charset=us-ascii"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">You might try adding the text nodes to the SVG before appending them to the HTML. <div class=""><br class=""></div><div class="">You might also try using the built-in JavaScript "createElementNS" for creating the 'g' tag, instead of simply using text. </div><div class=""><br class=""></div><div class="">See:</div><div class=""><a href="http://stackoverflow.com/a/3642265" class="">http://stackoverflow.com/a/3642265</a></div><div class=""><a href="http://stackoverflow.com/a/2545257" class="">http://stackoverflow.com/a/2545257</a></div><div class=""><br class=""></div><div class="">-Andrew</div><div class=""><br class=""><div><blockquote type="cite" class=""><div class="">On Jun 7, 2015, at 5:36 AM, SWPFFM <<a href="mailto:SWPFFM@web.de" class="">SWPFFM@web.de</a>> wrote:</div><br class="Apple-interchange-newline"><div class="">Dear MEI List,<br class=""><br class="">I have a question concerning adding svg elements at runtime in the<br class="">Javascript version of Verovio. Sorry for this question is not strictly<br class="">related to MEI, but I think most Verovio users come from the MEI<br class="">community. (And there is no Verovio mailinglist as far as I see.)<br class=""><br class="">I generate some Plaine&Easy Code that is displed by Verovio. Now my<br class="">goal is to add a text element above each measure. This is what I have<br class="">done so far:<br class=""><br class=""> /* some example pae music */<br class=""> data = "@clef:F-4";<br class=""> data += "@keysig:\n";<br class=""> data += "@timesig:4/4\n";<br class=""> data += "@data:,8G,4.A'4C'4C}/'2G{,8B'8xC}'4D}/";<br class=""><br class=""> var vrvToolkit = new verovio.toolkit();<br class=""> var svg = vrvToolkit.renderData(data, JSON.stringify({<br class=""> inputFormat: 'pae',<br class=""> pageWidth: 800*2,<br class=""> scale: 40 }) );<br class=""><br class=""> /* this works fine and displays very nicely rendered music*/<br class=""> $("div#output").html(svg);<br class=""><br class=""> /* first get the lowest y value of all notes */<br class=""> var yvals = $("g.note use").map(function() {<br class=""> return parseFloat( $(this).attr("y"), 10 ) ;<br class=""> }).get();<br class=""> var lowest_y = (Math.min.apply(Math, yvals) - 500.0).toString();<br class=""><br class=""> /* now add a chord label above the first note of each measure*/<br class=""> var chords = ["C major", "D minor"];<br class=""> $("g.measure").map(function(index) {<br class=""> var chordname = chords[index];<br class=""> var fnote = $($(this).find("g.note:first")).find("use:first");<br class=""> var text_node = '<g> <text x="' + $(fnote).attr("x") + '" y="' +<br class="">lowest_y + '" height="720px" width="720px" style="font-size:20em">' +<br class="">chordname + '</text> </g>';<br class=""> $("svg svg").prepend(text_node);<br class=""> });<br class=""><br class="">The result does not show any chord labels. However, if I copy the<br class="">resulting SVG and save it as a standalone SVG file, my browser shows<br class="">the chord labels. So I think it is supposed to work like this. How can<br class="">it be achieved that the text shows up in embeded svg at runetime?<br class=""><br class="">Thanks for any ideas and suggestions, also thanks alot for Verovio!<br class=""><br class="">Too bad I couldn't be at MEC2015, but I heard it has been a great event!<br class=""><br class="">Best,<br class=""><br class="">Frank<br class=""><br class="">-- <br class="">Frank Zalkow<br class="">Rintheimer Str. 58<br class="">76131 Karlsruhe<br class=""><br class="">Web: <a href="http://www.frank-zalkow.de" class="">www.frank-zalkow.de</a><br class="">Mail: <a href="mailto:frank_zalkow@web.de" class="">frank_zalkow@web.de</a><br class="">Phone: +49 172 715 7995<br class=""><br class="">_______________________________________________<br class="">mei-l mailing list<br class=""><a href="mailto:mei-l@lists.uni-paderborn.de" class="">mei-l@lists.uni-paderborn.de</a><br class="">https://lists.uni-paderborn.de/mailman/listinfo/mei-l<br class=""></div></blockquote></div><br class=""></div></body></html>