在已繪製的SVG中繪製

我想知道它是否可行以及如何繪製已繪製的SVG。假設我用SVG繪製了一些東西，但我想添加另一個元素，而不再繪製所有的地圖或修改原始的鱈魚。在已繪製的SVG中繪製

2013-05-04 Stanciu Alexandru-Marian

是的，它可以做到。其實，這是svg的優勢之一。這裏是一個例子：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>HTML5 SVG demo</title> 
    </head> 

    <body> 
     <h1>SVG DEMO</h1> 
     <svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg"> 
     <circle id="greencircle" cx="30" cy="30" r="30" fill="green" /> 
     </svg> 



     <script type="text/javascript"> 

      var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
      rect.setAttributeNS(null,"id", "myrect"); 
      rect.setAttributeNS(null,"fill", "red"); 
      rect.setAttributeNS(null,"stroke", "black"); 
      rect.setAttributeNS(null,"stroke-width", "5"); 
      rect.setAttributeNS(null,"x", "100"); 
      rect.setAttributeNS(null,"y", "100"); 
      rect.setAttributeNS(null,"width", "100"); 
      rect.setAttributeNS(null,"height", "50"); 
      var svg = document.getElementById("circle"); 
      svg.appendChild(rect); 


     </script> 
    </body> 
</html>

來源

2013-05-04 10:47:11 Alex

非常感謝！ – 2013-05-04 11:18:19

不客氣。 – Alex 2013-05-04 11:38:15

在已繪製的SVG中繪製

回答

相關問題