SVG HTML未绘制SVG模式

Question

Im creating an SVG pattern in HTML and the user will be able to change colour and size etc. But its not working. 我在HTML中创建了SVG模式，用户将能够更改颜色和大小等。但是它不起作用。

I get an error regarding the body onload function. 我收到有关body onload函数的错误。 and then when appending the SVG Diagram to the svg placeholder that i have. 然后将SVG图附加到我拥有的svg占位符时。

Here is the Script: 这是脚本：

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

Then for the body tag i have the following: 然后对于身体标签，我有以下内容：

<body onload="drawCircle()">

And for the contents of the page i have the following code: 对于页面的内容，我有以下代码：

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

Errors: 错误：

[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)

Where and what am i doing wrong? 我在哪里和哪里做错了？

Thanks 谢谢

This doesnt Work: 这不起作用：

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

    }

Answer 1

There are a few things wrong with your code. 您的代码有些错误。 One is the createAttributeNode() calls. 一种是createAttributeNode()调用。 Another is the document.content reference. 另一个是document.content参考。 Plus there are things like the strange colour value "centreColour". 另外，还有一些奇怪的颜色值“ centreColour”。

I've put together a working fiddle. 我整理了一个工作的小提琴。 Hopefully it helps you get things working in your code. 希望它可以帮助您使代码中的内容正常工作。

Demo here 在这里演示

SVG HTML未绘制SVG模式

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-04-22 13:50:35

SVG HTML未绘制SVG模式

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-04-22 13:50:35

解决方案1
0 已采纳 2014-04-22 13:50:35