Bir SVG öğesini klonlamak için javascript'i nasıl kullanırım?

Örnek here örneğini cloneNode bölümünde (belgede 'cloneNode'un dördüncü oluşumu) takip etmeye çalışıyorum. Belge bir TASLAK olduğunu söylüyor, bu yüzden henüz SVG ile bu özelliklerin mevcut olmadığını merak ediyorum ??Bir SVG öğesini klonlamak için javascript'i nasıl kullanırım?

<html> 
<head> 
<script> 

var Root=document.documentElement 
function clone(){ 
var G=document.getElementById("groupid") 
alert('hi') 
var NewG=G.cloneNode(true) 
alert('bye') 
var move="translate("+0+","+30+")" 
NewG.setAttributeNS(null,"transform",move) 
Root.appendChild(NewG) 
} 
clone() 

</script> 
</head> 
<body> 
    <div style="" width="100px" > 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="bigsvg"><?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg width="100%" height="100%"> 
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%"> 
     <g transform="translate(0.005) scale(0.022)" id="groupid"> 
      <path class="onepointsix" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " /> 
     </g> 
    </svg> 
</svg> 
    </div> 
</body> 
</html>

Gördüğünüz gibi, uyarı 'güle' çalışmaz:

İşte benim HTML. Yardım için şimdiden teşekkür ederiz.

kaynak

2014-04-15 mareoraft

: 'boş' bir nesne değil (G' değerlendirmek .cloneNode ') "JS başarısız olduğunda. – mareoraft

Çünkü getElementById', 'null' döndürüyor (cevabıma bakın). –

SO kullanıcıları için not: Cevabım tamamlanmadı, bu soru hala açık. –

Bu gerekirse daha karmaşık gibi görünüyor. Kök svg sadece piyon yolu ile başlayın. Sonra klonlayın ve köke ekleyin. Klonladığınızda, klonlanmış öğenin kimliğini değiştirmelisiniz. Aksi takdirde, orijinal klonlanmış öğeyi ele alırken bir çakışma olacaktır.

Bu deneyin:

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
     <title>Title</title> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     </head> 
     <body style='font-family:arial'> 
      <center> 

      <div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
<svg id="mySVG" width="400" height="400" xmlns="http://www.w3.org/2000/svg" > 
<path id="pawn" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " /> 
</svg> 
      </div> 
      <br />SVG Source:<br /> 
      <textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea> 
      <br />Javascript:<br /> 
      <textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea> 
      </center> 
<script id=myScript> 
var Root=mySVG 
function clone(){ 
var newPawn=pawn.cloneNode(true) 
newPawn.id="newPawn1" 
var move="translate("+0+","+30+")" 
newPawn.setAttribute("transform",move) 
Root.appendChild(newPawn) 
} 
</script> 
      <script> 
      document.addEventListener("onload",init(),false) 
      function init() 
      { 
       clone() 
       svgSourceValue.value=svgDiv.innerHTML 
       jsValue.value=myScript.text 
      } 
      </script> 
     </body> 
    </html>

kaynak

2014-04-15 20:21:38

getElementById numaralı telefonu aradığınızda, öğe henüz mevcut değil. gövdenin ucunda komut koyun:

<head> 
</head> 
<body> 
    <div style="" width="100px" > 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="bigsvg"><?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg width="100%" height="100%"> 
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%"> 
     <g transform="translate(0.005) scale(0.022)" id="groupid"> 
      <path class="onepointsix" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " /> 
     </g> 
    </svg> 
</svg> 
    </div> 
<script> 

var Root=document.documentElement 
function clone(){ 
var G=document.getElementById("groupid") 
alert('hi') 
var NewG=G.cloneNode(true) 
alert('bye') 
var move="translate("+0+","+30+")" 
NewG.setAttributeNS(null,"transform",move) 
Root.appendChild(NewG) 
} 
clone() 

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

kaynak

2014-04-15 18:28:15

Şimdi hızlı davranıyorsun, sadece yazıyordum, işte bir keman -> http://jsfiddle.net/J3UXK/ – adeneo

@adeneo Ben de test ettim (jsbin üzerinde: http://jsbin.com/kapey/1 /) –

Teşekkürler, bu büyük bir adım. Ancak, biz hala düğüm klonlamadık. Sadece bir piyon var ve biz iki tane istiyoruz! Teşekkürler beyler. – mareoraft

açıkça neden olduğunu hataları yapmak için:

var Kök = emin yeni klon alır yapmak gerekir çünkü document.documentElement yanlış olduğunu Sayfanın sonunda değil, üst SVG'sine eklendi. Bunun yerine ebeveyn için bir id = "mySVG" eklememiz ve var Root = mySVG kullanmanız gerekir. eleman yokken kod koştum çünkü
var G = document.getElementById ("groupid") 'groupid' elemanını kapmak vermedi. Çözüm, sayfa yüklendikten sonra (onload olayını kullanın veya komut dosyasını gövdesinin gövdesinin altına taşıyın) kodu tetiklemektir.
var hareket = "tercüme (" + 0 " "+ 30 +")" eski tercüme üzerine ve ölçek (0.022) SVG grubunda özelliği transforme değiştirilmesi edildi. Bu nedenle, yukarıdaki iki hatayı düzelttikten sonra klon var iken, o kadar uzakta aşağı viewBox dışındaydı. Onun yerine var hamleyi kullanmalıdır = "çevirmek (0,1) ölçek (0,022)" Ben TypeError" alıyorum eklemek istediğiniz

kaynak

2014-04-16 00:46:29 mareoraft

Bir SVG öğesini klonlamak için javascript'i nasıl kullanırım?

cevap

İlgili konular