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>