standalone svg使用javascript动态添加元素

时间：2018-04-18 15:46:02

标签： javascript svg

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

2 个答案:

答案 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），他们还必须至少支持规范中描述的功能。

＆＃13;
＆＃13; 
<?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>
＆＃13;
＆＃13;
＆＃13;

答案 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")。

＆＃13;
＆＃13; 
<?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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题