¿Cómo puedo usar javascript para clonar un elemento SVG?

Estoy tratando de seguir el ejemplo aquí bajo el cloneNode sección (cuarta aparición de ‘cloneNode» en el documento). Dice el documento es un BORRADOR por lo que me pregunto si estas características no existen con SVG??

Aquí está mi código 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>

Como se puede ver, la alerta de ‘adiós’ no funciona. Gracias de antemano por la ayuda.

Quiero añadir que estoy recibiendo «TypeError: ‘null’ no es un objeto (la evaluación de ‘G. cloneNode’)», donde el JS falla.
Eso es porque getElementById devuelve null (ver mi respuesta).
Nota PARA los usuarios : mi respuesta no está completa, esta pregunta sigue abierta.

OriginalEl autor mareoraft | 2014-04-15

3 Kommentare

  1. 2

    Esto parece ser más complicado de lo que deben ser. Empezar solo con su peón de ruta de acceso en la raíz de svg. A continuación, clon, y anexar a la raíz. Una de las cosas importantes que tratar que una vez clonar, usted debe cambiar el id del elemento clonado. De lo contrario obtendrá un conflicto a la hora de abordar original clonado elemento.

    Intente Esto:

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

    OriginalEl autor Francis Hemsher

  2. 6

    Cuando llame getElementById, el elemento no existe todavía. Poner el script en el extremo del cuerpo :

    <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>
    Ahora usted está siendo rápido, solo tenía que escribir, aquí un violín -> jsfiddle.net/J3UXK
    Yo había probado demasiado (en jsbin : jsbin.com/kapey/1 )
    Gracias, este es un gran paso. Sin embargo, todavía no hemos clonado el nodo. No es sólo un peón, y queremos dos! Gracias chicos.
    No sé lo que pasa aquí. Agrega el nodo, pero no es visible (incluso cuando se añade a G.parentNode). Voy a tratar de convocar a un poco de ayuda.

    OriginalEl autor Denys Séguret

  3. 1

    Para dejar claro lo que estaba causando errores:

    1. var Root=documento.documentElement estaba equivocado, porque tenemos que asegurarnos de que el nuevo clon se añade a su padre SVG, no al final de la página. En lugar de ello debemos agregar un id=»mySVG» a los padres y, a continuación, utilizar var Root=mySVG.

    2. var G=documento.getElementById(«groupid») no agarra el ‘groupid’ elemento porque el código corrió antes de que el elemento que existían. La solución es activar el código para que se ejecute DESPUÉS de la carga de la página (uso onload evento, o mover el archivo de comandos en la parte inferior de la cuerpo).

    3. var mover=»traducir(«+0+»,»+30+»)» fue la sustitución de la transformación de la propiedad en el grupo SVG, sobreescribiendo el antiguo traducir Y la escala(0.022). Por lo tanto, mientras que el clon existía después de la fijación de estos dos errores, fue tan lejos que estaba fuera de la viewBox. En lugar de eso debería usar var mover=»traducir(0,1) escala(0.022)»

    OriginalEl autor mareoraft

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea