0

我是 JavaScript 和 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>
4

1 回答 1

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()为此。

工作示例小提琴

于 2013-02-16T09:05:20.927 回答