javascript - 独立的svg使用javascript动态添加元素

Question

我正在创建一个独立的 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>

Answer 1

当您的 SVG 元素在浏览器中显示为主文档时，它实际上是生成文档的一个元素，因此您可以简单地使用 javascript 中已经熟悉的技术:

var svg = document.querySelector('svg')

由于 SVG 不是文档，因此您不能使用它来创建元素，但可以使用文档本身来创建新形状:

var shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

然后您可以将它们附加到新找到的 svg 元素中。为了清楚起见，我修改了您的代码。如果这不起作用，您到底用什么来显示这些 SVG？因为如果它们支持“ecmascript”(又名 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>