Inline-SVG not rendering when generated by JS
- by Lucas Gasenzer
I want to implement some visual statistics into a jQuery mobile page. If I embed the folowing snippet it will show me the same results as if I would embed it from a separate *.svg-file.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="115" width="100%">
<rect x="0%" y="0" fill="#8cc63f" width="19.2%" height="100" />
<text x="10%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">A</text>
<text x="10%" y="15" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">100</text>
<rect x="20.2%" y="50" fill="#8cc63f" width="19.2%" height="50" />
<text x="30.2%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">B</text>
<text x="30.2%" y="65" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">50</text>
<rect x="40.4%" y="90" fill="#8cc63f" width="19.2%" height="10" />
<text x="50.4%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">C</text>
<text x="50.4%" y="85" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">10</text>
<rect x="60.6%" y="78" fill="#8cc63f" width="19.2%" height="22" />
<text x="70.6%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">D</text>
<text x="70.6%" y="73" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">22</text>
<rect x="80.8%" y="40" fill="#8cc63f" width="19.2%" height="60" />
<text x="90.8%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">E</text>
<text x="90.8%" y="55" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">60</text>
Now because these statistics obviously change for each site I generate code like the one above using JavaScript. The HTML-Source-Code looks the same but the SVG will not be showing. Instead it looks like this:
A 100 B 50 C 10 D 22 E60
so really just a line of text
Am I missing something? Thank you for your help!