Wie kann ich einen Snap.svg-Effekt auf eine externe Svg-Datei mit jQuery onclick Funktion auslösen?

Dies ist meine HTML-Seite, die ich ändern möchte:Wie kann ich einen Snap.svg-Effekt auf eine externe Svg-Datei mit jQuery onclick Funktion auslösen?

Ich versuche, die Farbe eines SVG-Bild mit Snap.svg gebaut und ich möchte jQuery verwenden, um diesen Effekt zu erreichen, aber anscheinend ist es nicht Was wird passieren.

Dies ist mein Code so weit:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    <script src="dist/snap.svg-min.js"></script> 
</head> 
<body> 
    <div style="width: 70%"> 
     <svg id="snapSvg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg> 
     <button id="button">Click</button> 
    </div> 



    <script> 
     $(window).load(function() { 


     var s = Snap('#snapSvg'); 

     s.attr({viewBox: "0 0 1200 600"}); 

     var snapSvg = Snap.load("world.svg", function (world) { 
      world.select("#italy").attr({fill: "green"}); 
      world.select("#usa").attr({fill: "blue"}); 
      world.select("#germany").attr({fill: "yellow"}); 
      s.append(world); 
     }); 

    }); 
    </script> 

</body> 
</html>

Meine Absicht ist es, eine Taste zu verwenden, um den Effekt auszulösen, die Farbe des einzelnen Landes zu verändern, anstatt sie mit Schnippen Laden, so etwas wie $('#button').click(function() { world.select("#italy").attr({fill: "green"}); }); nachdem ich geladen die externe svg.

Diese Datei world.svg stammt aus Wikipedia.

Quelle

2016-03-25 Marco Maffei

ist es zwei grundlegende Ansätze hier:

die click hinzufügen im Snap.load Rückruf für die externe SVG Bindung:

Snap.load("world.svg", function(world) { 
    //... 

    // appending to the DOM might destroy the id so # selector will break 
    // so first save a reference for it 
    var italy = world.select('#italy'); 
    s.append(world); 

    $('#button').click(function() { 
     italy.attr({fill: "green"}); 
    }); 
});

die Schließung verwenden, um einen Verweis auf die geladenen externen SVG zu teilen :

$(window).load(function() { 
    var italy; 

    $('#button').click(function() { 
     italy.attr(...); 
    }); 

    //... 

    Snap.load("world.svg", function(world) { 
     italy = world.select('#italy'); 
     s.append(world); 
    }); 
});

Der Vorteil des ersten ist, dass Sie nicht mit dem Fall umgehen müssen, dass die Schaltfläche angeklickt wird, bevor das SVG geladen wird. Das Klickereignis wird einfach ignoriert.

Überprüfen Sie whether document.ready would be better than window.load.

Quelle

2016-03-25 00:19:59 szym

ich beiden Ansätze bin versucht: Mit dem ersten ich eine „Reference erhalten : Welt ist nicht definiert“ $ (document) .ready (function() { var s = Schnapp ('# snapSvg'); s.attr ({viewBox: "0 0 1200 600"}); var snapSvg = Snap.load ("world.svg", Funktion (Welt)) { s.append (world); }); $ ('# button') click (function() { world.select ("# Italien"). Attr ({fill: "green"}); }); }); –

Dies entspricht nicht dem ersten Ansatz. Beachten Sie, dass in der ersten Näherung die '$ ('# Schaltfläche'). Klicken Sie (....);' Anweisung ist ** innerhalb ** der Bereich der 'Funktion (Welt) {...}' Callback. – szym

Entschuldigung, ich musste unten antworten ⬇️ –

Ich versuche, beiden Ansätze: Mit dem ersten ich eine bekommen „Reference: Welt ist nicht definiert“

$(document).ready(function() { 
     var s = Snap('#snapSvg'); 

     s.attr({viewBox: "0 0 1200 600"}); 
     var snapSvg = Snap.load("world.svg", function (world) { 
      s.append(world); 
     }); 
     $('#button').click(function() { 
      world.select("#italy").attr({fill: "green"}); 
     }); 
    });

Quelle

2016-03-25 00:54:11

Dies ist nicht ganz nach dem ersten Ansatz. Beachten Sie, dass in der ersten Näherung die '$ ('# Schaltfläche'). Klicken Sie (....);' Anweisung ist ** innerhalb ** der Bereich der 'Funktion (Welt) {...}' Callback. – szym

Ich habe versucht, auf diese Weise: $ (document) .ready (function() { var s = Schnapp ('# snapSvg'); s.attr ({viewBox: "0 0 1200 600"}); var snapSvg = Snap.load ("Welt.svg", Funktion (Welt)) { $ ('# button'). Click (function() { world.select ("# italy"). Attr ({fill: "grün"}); }); s.anhängen (Welt); }); }); Aber wenn ich auf meine Schaltfläche klicke, erhalte ich einen "TypeError: world.select (...) ist null" –

Und ich versuchte auch den zweiten Ansatz, aber ich erhalte einen weiteren Fehler: theWorld.select (...) null $ (Fenster) .load (function() {ist var theWorld;.. $ ('# Taste') klicken (function() { theWorld.select ("# Italien") attr ({fill : "blau"}); }); var s = Schnapp ('# snapSvg'); Snap.load ("world.svg", Funktion (Welt) { s.append (Welt); theWorld = Welt; }); }); –

Wie kann ich einen Snap.svg-Effekt auf eine externe Svg-Datei mit jQuery onclick Funktion auslösen?

Antwort

Verwandte Themen