我正在创建一个独立的svg。随着javascript嵌入。 我在访问根元素“svg”时遇到了困难。 它嵌入HTML页面（getElementById）时很容易，但它是否可以独立完成？
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id ="testsvg" width="1000" height="500" viewBox="0 0 1000 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example script01 - invoke an ECMAScript function from an onclick event
</desc>
<!-- ECMAScript to change the radius with each click -->
<script type="application/ecmascript"> <![CDATA[
function circle_click(evt) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if (currentRadius == 100)
circle.setAttribute("r", currentRadius*2);
else
circle.setAttribute("r", currentRadius*0.5);
}
function make_shape(evt) {
var svg = // <------------- WHAT TO USE?
console.log(svg);
shape = svg.createElement("circle");
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r", 20);
shape.setAttribute("style", "fill: green");
svg.appendChild(shape);
}
]]> </script>
<!-- Outline the drawing area with a blue line -->
<rect x="1" y="1" width="900" height="498" fill="none" stroke="blue"/>
<!-- Act on each click event -->
<circle onclick="circle_click(evt)" cx="300" cy="225" r="50"
fill="red"/>
<!-- Act on each click event -->
<circle onclick="make_shape(evt)" cx="500" cy="225" r="50"
fill="yellow"/>
<text x="500" y="380" font-family="Verdana" font-size="35" text-anchor="middle">
Click on red circle to change its size.
</text>
<text x="500" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
Click on yellow circle to add a circle
</text>
</svg>
答案 0 :(得分：1)
当您的SVG元素在浏览器中显示为主文档时，它实际上是生成文档的元素，因此您可以简单地使用javascript中已经熟悉的技术：
var svg = document.querySelector('svg')
由于SVG不是document，因此您无法使用它来创建元素，但您可以使用document本身来创建新形状：
var shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
然后您可以将它们附加到新发现的svg元素中。为清楚起见，我修改了您的代码。如果这不起作用，您究竟使用什么来显示这些SVG？因为如果他们支持'ecmascript＆＃39; （又名javascript），他们还必须至少支持规范中描述的功能。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id ="testsvg" width="1000" height="500" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>
Example script01 - invoke an ECMAScript function from an onclick event
</desc>
<!-- ECMAScript to change the radius with each click -->
<script type="text/javascript">
function circle_click( evt ){
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if( currentRadius == 100 ){
circle.setAttribute("r", currentRadius*2);
} else {
circle.setAttribute("r", currentRadius*0.5);
}
}
function make_shape( evt ){
var svg = document.querySelector('svg');
var shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r", 20);
shape.setAttribute("style", "fill: green");
svg.appendChild( shape );
}
</script>
<!-- Outline the drawing area with a blue line -->
<rect x="1" y="1" width="900" height="498" fill="none" stroke="blue"/>
<!-- Act on each click event -->
<circle onclick="circle_click(evt)" cx="300" cy="225" r="50" fill="red"/>
<!-- Act on each click event -->
<circle onclick="make_shape(evt)" cx="500" cy="225" r="50" fill="yellow"/>
<text x="500" y="380" font-family="Verdana" font-size="35" text-anchor="middle">
Click on red circle to change its size.
</text>
<text x="500" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
Click on yellow circle to add a circle
</text>
</svg>
答案 1 :(得分：1)
DOM API仍然可以正常运行，因此您可以使用document.querySelector('svg')。我假设您可以为svg分配一个类或ID，如果您需要以其他方式选择它。但是，选定的svg仍然只是一个元素，因此您需要svg.createElement()而不是document.createElement()。如果你这样做，代码应该工作，但不会显示任何内容。我刚才了解到，这是因为必须使用document.createElementNS()创建svg元素，它带有两个参数：xmlns，以及要创建的元素类型：document.createElementNS("http://www.w3.org/2000/svg", "circle")。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id ="testsvg" width="1000" height="500" viewBox="0 0 1000 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example script01 - invoke an ECMAScript function from an onclick event
</desc>
<!-- ECMAScript to change the radius with each click -->
<script type="application/ecmascript"> <![CDATA[
function circle_click(evt) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if (currentRadius == 100)
circle.setAttribute("r", currentRadius*2);
else
circle.setAttribute("r", currentRadius*0.5);
}
function make_shape(evt) {
var svg = document.querySelector('svg');
shape = document.createElementNS( "http://www.w3.org/2000/svg", "circle");
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r", 20);
shape.setAttribute("fill", "green");
svg.appendChild(shape);
}
]]> </script>
<!-- Outline the drawing area with a blue line -->
<rect x="1" y="1" width="900" height="498" fill="none" stroke="blue"/>
<!-- Act on each click event -->
<circle onclick="circle_click(evt)" cx="300" cy="225" r="50"
fill="red"/>
<!-- Act on each click event -->
<circle onclick="make_shape(evt)" cx="500" cy="225" r="50"
fill="yellow"/>
<text x="500" y="380" font-family="Verdana" font-size="35" text-anchor="middle">
Click on red circle to change its size.
</text>
<text x="500" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
Click on yellow circle to add a circle
</text>
</svg>