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.
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 ⬇️ –