1
我在HTML中創建一個SVG圖案,用戶將能夠改變顏色和大小等,但它不工作。SVG HTML不繪製SVG圖案
我得到一個關於body onload函數的錯誤。然後將SVG圖追加到我擁有的svg佔位符。
下面是腳本:
<script>
var SVG = document.getElementById("svgArea");
document.content.appendChild(SVG);
function drawCircle()
{
var svgLink = "http://www.w3.org/2000/svg";
var Centre = document.createElementNS(svgLink,"circle");
Centre.setAttributeNodeNS(null,"id","Centre");
Centre.setAttributeNodeNS(null,"cx",230);
Centre.setAttributeNodeNS(null,"cy",0);
Centre.setAttributeNodeNS(null,"r",75);
Centre.setAttributeNodeNS(null,"fill","centreColour");
document.getElementById("svgArea").appendChild(Centre);
var group = document.getElementById("svgArea");
group.setAttribute("transform","translate(230,0)");
}
</script>
然後body標籤,我有以下幾點:
<body onload="drawCircle()">
而對於網頁我有以下代碼的內容:
<div class="content">
<!-- SVG DIAGRAM -->
<svg id="SVG" style="background:pink" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="690" height"400">
<g id="svgArea">
</g>
</svg>
</div>
錯誤:
[Error] TypeError: 'undefined' is not an object (evaluating 'document.content.appendChild')
global code (SVG.html, line 33)
[Error] TypeMismatchError: DOM Exception 17: The type of an object was incompatible with the expected type of the parameter associated to the object.
drawCircle (SVG.html, line 57)
onload (SVG.html, line 107)
我在哪裏做錯了什麼?
感謝
這並不工作:
//Drawing Petals
for (var i = 0; i < numberOfPetals; i++)
{
var svgLink = "http://www.w3.org/2000/svg";
var flowerPettle = document.createElementNS(svgLink,"ellipse");
flowerPettle.setAttributeNS(null,"id","flowerPettle");
flowerPettle.setAttributeNS(null,"ry", 230);
flowerPettle.setAttributeNS(null,"rx",0)
flowerPettle.setAttributeNS(null,"fill",petalColour);
var rotate = "rotate(" + (i*(360/numberOfPetals)) + " " + 300 + "," + 30 + ")";
flowerPettle.setAttribute("transform",rotate);
document.getElementById("FlowerArea").appendChild(flowerPettle);
}
你應該使用'setAttributeNS()''而不是setAttributeNodeNS()'。除此之外,你的代碼看起來很好,假設'svgArea'是已經在你的標記中的元素的ID –
啊謝謝仍然得到這個錯誤: TypeError:'undefined'不是一個對象(評估'document.content。 appendChild') global codeSVG.html:34 SVG.html:61 – 40764627182
使用'document.content'你試圖選擇'content'類的div嗎? –