Jak używać javascript do klonowania elementu SVG?

Próbuję postępować zgodnie z przykładem here w sekcji cloneNode (czwarte wystąpienie "cloneNode" w dokumencie). Dokument mówi, że to DRAFT, więc zastanawiam się, czy te funkcje nie istnieją jeszcze w SVG?Jak używać javascript do klonowania elementu SVG?

Tu jest mój HTML:

<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>

Jak widać, alert 'do widzenia' nie działa. Z góry dziękuję za pomoc.

Źródło

2014-04-15 mareoraft

Chcę dodać, że ja dostaję „Błąd typu:«null»nie jest przedmiotem (oceny„G .cloneNode ")" w przypadku niepowodzenia JS. – mareoraft

To dlatego, że 'getElementById' zwraca' null' (zobacz moją odpowiedź). –

Uwaga dla użytkowników SO: moja odpowiedź nie jest kompletna, to pytanie jest wciąż otwarte. –

To wydaje się być bardziej skomplikowana, niż to konieczne. Zacznij od swojej ścieżki pionka w głównym pliku SVG. Następnie sklonuj i dołącz do katalogu głównego. Jedną z ważnych rzeczy, które należy rozwiązać po sklonowaniu, należy zmienić identyfikator sklonowanego elementu. W przeciwnym razie wystąpi konflikt podczas adresowania oryginalnego sklonowanego elementu.

Spróbuj to:

<!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>

Źródło

2014-04-15 20:21:38

Po wywołaniu getElementById element jeszcze nie istnieje. Umieścić skrypt na końcu ciała:

<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>

Źródło

2014-04-15 18:28:15

Teraz jesteś szybki, właśnie to pisałeś, tutaj jest skrzypce -> http://jsfiddle.net/J3UXK/ – adeneo

@adeneo Testowałem też (na jsbin: http://jsbin.com/kapey/1 /) –

Dzięki, to duży krok. Jednak nadal nie sklonowaliśmy węzła. Jest tylko jeden pionek i chcemy dwóch! Dzięki chłopaki. – mareoraft

aby było jasne, co było przyczyną błędów:

var root = document.documentElement było błędne, ponieważ musimy upewnić się, że nowy klon dostaje dodane do nadrzędnego SVG, a nie na końcu strony. Zamiast tego musimy dodać do rodzica id = "mySVG", a następnie użyć var Root = mySVG.
var G = document.getElementById ("GroupID") nie chwycić 'GroupID' elementu, ponieważ kod ran przed powstaniem elementem. Rozwiązaniem jest uruchomienie kodu po załadowaniu strony (użyj zdarzenia onload lub przenieś skrypt na spód ciała body).
var ruch = "translate (" + 0 + " "+ 30+")" było zastąpienie transformacji własności w grupie SVG, zastępując stare tłumaczyć i skali (0,022). W związku z tym, podczas gdy klon istniał po naprawieniu powyższych dwóch błędów, znajdował się tak daleko, że znajdował się poza zasięgiem widoku. Zamiast tego powinno się używać var ruch = „translate (0,1) skala (0,022)”

Źródło

2014-04-16 00:46:29 mareoraft

Jak używać javascript do klonowania elementu SVG?

Odpowiedz

Powiązane problemy