Question

我是Javasscript和SVG的新手，可以成功生成内联SVG对象并更改属性。

我还尝试过剪切和粘贴代码以动态添加SVG对象而没有运气。这是我试过的代码......

<html>
<head>
<script>
function setColor(color)
{
document.getElementById("rect").style.fill = color;
document.getElementById("rect").setAttribute("height",100);
document.getElementById("line").style.stroke = color;
document.getElementById("myLine").style.stroke = "blue";
}
    var myrect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    myrect.setAttribute("id", "myrect"); 
    myrect.setAttribute("fill","red");
    myrect.setAttribute("stroke","black");
    myrect.setAttribute("stroke-width","5");
    myrect.setAttribute("x", "100");
    myrect.setAttribute("y", "100");
    myrect.setAttribute("width", "300");
    myrect.setAttribute("height", "300");
    svg.appendChild(myrect);
    </script>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px">
<rect x="50" y="20" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" />

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" id="line"/>

<line x1="10" y1="10" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5" id="myLine"/>

</svg>

<button onclick="setColor('red');">Red</button>
<button onclick="setColor('green');">Green</button>
<button onclick="setColor('blue');">Blue</button>

</body>
</html>

Answer 1

你的问题是，你试图修改那些在那时没有解析的DOM部分。只需将<script>标记移到页面底部，然后在那里创建<rect>就可以了：

<html>
<head>
<script>
function setColor(color)
{
document.getElementById("rect").style.fill = color;
document.getElementById("rect").setAttribute("height",100);
document.getElementById("line").style.stroke = color;
document.getElementById("myLine").style.stroke = "blue";
}
    </script>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px" id="mySvg">
<rect x="50" y="20" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" />

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" id="line"/>

<line x1="10" y1="10" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5" id="myLine"/>

</svg>

<button onclick="setColor('red');">Red</button>
<button onclick="setColor('green');">Green</button>
<button onclick="setColor('blue');">Blue</button>

<script>
    var svg = document.getElementById( 'mySvg' );
    var myrect = document.createElementNS( "http://www.w3.org/2000/svg", 'rect');
    myrect.setAttribute("id", "myrect"); 
    myrect.setAttribute("fill","red");
    myrect.setAttribute("stroke","black");
    myrect.setAttribute("stroke-width","5");
    myrect.setAttribute("x", "100");
    myrect.setAttribute("y", "100");
    myrect.setAttribute("width", "300");
    myrect.setAttribute("height", "300");
    svg.appendChild(myrect);
</script>
</body>
</html>

此外，您应该明确选择<svg>元素，然后添加到它。例如，使用getElementById()。

<强> Working Example Fiddle

使用JavaScript附加SVG对象

1 个答案: