Inline-SVG не рендеринг при генерации JS

Question

Я хочу реализовать некоторую визуальную статистику на мобильной странице jQuery. Если я вставляю следующий фрагмент, он покажет мне те же результаты, что и встроить его из отдельного * .svg-файла.

<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> 

Теперь, потому что эти статистические данные, очевидно, изменить для каждого сайта я генерировать код, подобный приведенному выше, с помощью JavaScript. HTML-исходный код выглядит одинаково, но SVG не будет отображаться. Вместо этого он выглядит следующим образом:

A 100 B 50 C 10 D 22 E60 

так на самом деле просто строка текста

Мои JS (backbone_js) выглядит следующим образом:

/* 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; 
    } 
}) 

});

Я что-то упустил? Спасибо за помощь!

Answer 1

Если вы сохраняете его как .svg, обязательно включайте заголовки.

<?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"> 

Или вы можете сохранить как файл HTML:

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