Inline-SVG not rendering when generated by JS

Question

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

My js (backbone_js) looks like this:

/* Rendert den Publikumsjoker */
_.extend(KM.Views, {
"StatsPubJoker" : Backbone.View.extend({
    tagName : 'svg:svg',
    attributes:{
        'type':'image/svg+xml',
        'xmlns':"http://www.w3.org/2000/svg",
        //'xmlns:svg':"http://www.w3.org/2000/svg",
        'xmlns:xlink':"http://www.w3.org/1999/xlink",
        'version':'1.1',
        // 'baseProfile':'tiny',
        height:'115',
        width:'100%'
    },
    initialize : function() {
        _.bindAll(this, 'render');
        _.bindAll(this, 'renderSingleBar');

        // Fragenmodel hintelegen
        this.model    = this.options.model;

        // Anzahl an Antwortmöglichkeiten
        var countAnswerOptions = _.keys(this.model.get('stats').pubJoker.prozDistribution).length;


        // Optionen zum  Plotten hinterlegen
        this.plotOptions = {

                // Summe aller gemachten Kreuze hinterlegen (=n)
                n : this.model.get('stats').pubJoker.sumup,

                // Anzahl unterschiedlicher Antwortmöglichkeiten zwischenspeichern
                N : countAnswerOptions,

                // Breiten festlegen (in Prozent)
                barWidth : (99 / countAnswerOptions), // + '%',
                spacerWidth : 1 / (countAnswerOptions-1), // + '%',
                textOffset: 99 / countAnswerOptions * 2
        };

        console.log(this.plotOptions);

        // counter für Balken
        this.barCounter = 0;

        // Das Template laden 
        this.template = _.template($('#stats-pubjoker-singleitem').html());
    },
    render : function() { 

        if(this.plotOptions.n == undefined || this.plotOptions.n == 0 || this.plotOptions.n == 0) return this;

        console.log(this.model.get('stats').pubJoker.prozDistribution);
        _.each(this.model.get('stats').pubJoker.prozDistribution, this.renderSingleBar);

        return this;
    },
    renderSingleBar: function(singleitem,letterkey){

        var singleBarOptions            = {};

        singleBarOptions.xposBar        = (this.plotOptions.barWidth + this.plotOptions.spacerWidth) * this.barCounter;
        singleBarOptions.xposText       =  this.plotOptions.textOffset + singleBarOptions.xposBar;
        singleBarOptions.yposLetter     = 115;
        singleBarOptions.yposBar        = parseFloat(singleitem);
        singleBarOptions.letter         = letterkey;
        singleBarOptions.value          = singleitem;
        singleBarOptions.yposTextNumber = singleBarOptions.yposBar < 25 ? singleBarOptions.yposBar + -15 : singleBarOptions.yposBar +5;
        console.log(singleBarOptions);

        this.$el.append(this.template(_.extend(singleBarOptions, this.plotOptions)));

        this.barCounter++;

        return false;
    }
})

});

Am I missing something? Thank you for your help!

hm, formating seems to be complicated but the code above should be the problem. The thing is, that everything looks fine inside he html-code once it's created by js. It's just that it won't display... — Lucas Gasenzer, Dec 13 '12 at 19:22
I think `this.$el.append(...)` resorts to innerHTML which is something that has certain catches in SVG. Take a look at the answers here: http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element — methodofaction, Dec 13 '12 at 19:36
Just as a test, try removing all attributes from your `svg` tag and see if it is displayed. — methodofaction, Dec 13 '12 at 19:40
I doubt that setting xmlns as an attribute really puts the element in the svg namespace, it's more likely the element is in the html namespace with an attribute on xmlns. Can backbone even do namespaced element creation? — Robert Longson, Dec 13 '12 at 20:28
Ok, a collegue of mine fixed it by generating the svg-elements directly instead of using templates. Thanks for all your help! — Lucas Gasenzer, Dec 18 '12 at 12:14

bobthyasian · Answer 1 · 2012-12-13T17:26:29.917

0

If you are saving it as an .svg make sure to include the headers.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Or you can save as an html file:

<html>
<body>
.....
</body>
</html>

edited Dec 13 '12 at 17:26

answered Dec 13 '12 at 17:15

bobthyasian

933
5
17

Op said there is the closing `` tag, but it was just missed in the code sample. – Sirko Dec 13 '12 at 17:20
The problem is not the static SVG, but the SVG he creates with JavaScript. – Sirko Dec 13 '12 at 17:23

Inline-SVG not rendering when generated by JS

1 Answers1

Linked