Inline-SVG not rendering when generated by JS

Posted by Lucas Gasenzer on Stack Overflow See other posts from Stack Overflow or by Lucas Gasenzer
Published on 2012-12-13T17:00:42Z Indexed on 2012/12/13 17:03 UTC
Read the original article Hit count: 257

Filed under:
|
|
|
|

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about mobile