jQuery添加的SVG元素不显示

Question

如果这个问题已经有答案了，对不起，因为我是SO的新手。

我正在尝试使用jQuery创建SVG元素，并且我有以下代码作为HTML页面的一部分：

<svg viewBox="0 0 1000 500">
    <defs>
        <clipPath id="clip">
            <ellipse cx="100" cy="250" rx="200" ry="50" />
        </clipPath>
    </defs>
    <g>
        <path d="M 0,0 L 1000,0 1000,500 0,500"
            fill="#9ADEFF" />
        <path id="boat" stroke="none" fill="red"
            d="M 100,175 L 300,175 300,325 100,325"
            clip-path="url(#clip)" />
    </g>
    <g id="0002" width="100" height="100%"
        transform="translate(1000)">
        <line x1="50" y1="0" x2="50" y2="300"
            stroke="green" stroke-width="100" />
    </g>
</svg>

以下是使用jQuery 1.9编写的JavaScript代码：

var id = 10000,
    coinArray = []

function generateNextLine(type) {
    $('svg').append($(type()))
    return $('svg')[0]
}

function idNo() {
    id++
    return ((id-1)+"").substr(-4)
}

function random(x,y) {
    if (!y) {
        y=x
        x=0
    }
    x=parseInt(x)
    y=parseInt(y)
    return (Math.floor(Math.random()*(y-x+1))+x)
}

function coins() {
    coinArray[id%10000]=[]
    var gID = idNo(), x,
    g=$(document.createElement('g')).attr({
        id: gID,
        width: "100",
        height: "100%"
    })
    while (3<=random(10)) {
        var randomPos=random(50,450)
        coinArray[(id-1)%10000][x] = randomPos
        $(g).append(
            $(document.createElement('circle'))
            .attr({
                cx: "50",
                cy: randomPos,
                r: "50",
                fill: "yellow"
            })
        )
        x++
    }
    return $(g)[0]
}

当我运行generateNextLine(coins);时，svg会添加此元素：

<g id="0000" width="100" height="100%">
    <circle cx="50" cy="90" r="50" fill="yellow"></circle>
</g>

然而，SVG 的实际显示没有改变。如果我直接将此代码添加到 SVG 中，它会渲染为我所期望的样子，但运行我的 JavaScript 函数似乎对显示没有任何影响。我正在使用 OS X Lion 上的 Chrome 28。

- Charlie Harding

Answer 1

您必须在SVG命名空间中创建SVG元素，这意味着您不能执行以下操作：

document.createElement('g')

但是你必须写成

document.createElementNS('http://www.w3.org/2000/svg', 'g')

同样适用于圆形等。

- Robert Longson

---

实际上，HTML5允许您在HTML中直接嵌入<svg>元素，而无需命名空间。请参见此问题以了解为什么这些元素不会显示。简而言之：jQuery的函数专门针对HTML元素进行了优化，其中许多函数对于SVG元素将无法正常工作。例如，jQ使用了JavaScript的innerHTML，而SVG元素不支持此方法。 - chharvey

所有的说法都是正确的，但并不适用于这个特定的情况，因为问题中的代码使用了createElement，这就是为什么它没有起作用的原因。 - Robert Longson