Jquery 由JS生成时不呈现内联SVG

我想在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>

所以实际上只是一行文字

我的js（主干网）如下所示：

A 100 B 50 C 10 D 22 E60

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

/*Rendert den Publikumsjoker*/
_.延伸（KM.视野{
“StatsPubJoker”：Backbone.View.extend({
标记名：“svg:svg”，
属性：{
“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",
“版本”：“1.1”，
//'baseProfile'：'tiny'，
高度：'115'，
宽度：'100%'
},
初始化：函数（）{
_.bindAll（这是“呈现”）；
_.bindAll（这是“renderSingleBar”）；
//弗雷根模型
this.model=this.options.model；
//安扎尔·安特沃特姆·格利奇凯滕（Anzahl an Antwortmöglichkeiten）
var countAnswerOptions=u0.keys（this.model.get（'stats'）.pubJoker.prozDistribution）.length；
//祖姆普罗滕腹地酒店
this.plotOptions={
//金泰尔根（北）
n:这个.model.get（'stats'）.pubJoker.summap，
//安扎尔·安特斯基德莱彻·安特斯基滕·兹维申斯佩切恩（Anzahl unterschiedlicher Antwortmöglichkeiten Zwischenspeichen）
N:countAnswerOptions，
//Breiten festlegen（按比例）
条形宽度：（99/countAnswerOptions），//+'%'，
间隔宽度：1/（countAnswerOptions-1），//+'%'，
text偏移量：99/countAnswerOptions*2
};
console.log（this.plotOptions）；
//计数器für Balken
这个.barCounter=0；
//Das模板装载
this.template=..template（$（'.#stats pubjoker singleitem'）.html（））；
},
render:function（）{
如果（this.plotOptions.n==undefined | | this.plotOptions.n==0 | | this.plotOptions.n==0）返回此值；
console.log（this.model.get（'stats'）.pubJoker.prozDistribution）；
_.each（this.model.get（'stats'）.pubJoker.prozDistribution，this.renderSingleBar）；
归还这个；
},
renderSingleBar:函数（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=字母键；
singleBarOptions.value=singleitem；
singleBarOptions.yposTextNumber=singleBarOptions.yposBar<25？singleBarOptions.yposBar+-15：singleBarOptions.yposBar+5；
console.log（单选选项）；
this.$el.append（this.template（u.extend（singleBarOptions，this.plotOptions））；
这个.barCounter++；
返回false；
}
})

}))

---

我错过什么了吗？谢谢你的帮助

如果要将其保存为

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

.....

标签已关闭。我在复制.JSFiddle您的JS代码时错过了它。我相信这很简单。嗯，格式化似乎很复杂，但上面的代码应该是问题所在。问题是，一旦js创建了html代码，它里面的一切看起来都很好。只是它不会显示……我认为，

这个。$el.append（…）

求助于innerHTML，这在SVG中有一定的捕捉。看看这里的答案：我怀疑将xmlns设置为属性是否真的会将元素放在svg名称空间中，更可能的情况是，该元素在html名称空间中具有xmlns上的属性。主干网甚至可以创建名称空间的元素吗？Op说有结束标记

，但代码示例中没有标记。问题不是静态SVG，而是他用JavaScript创建的SVG。