如果这个问题已经有答案了,对不起,因为我是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。
<svg>
元素,而无需命名空间。请参见此问题以了解为什么这些元素不会显示。简而言之:jQuery的函数专门针对HTML元素进行了优化,其中许多函数对于SVG元素将无法正常工作。例如,jQ使用了JavaScript的innerHTML
,而SVG元素不支持此方法。 - chharvey