如何使用 jQuery onclick 函数在外部 svg 文件上触发 snap.svg 效果？

Question

这是我要修改的 html 页面：

我正在尝试更改使用 snap.svg 构建的 svg 图像的颜色，我想使用 jQuery 来实现该效果，但显然这不会发生。

到目前为止，这是我的代码：

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

我的意图是使用一个按钮来触发效果来改变单个国家的颜色，而不是用 snap 加载它们，就像我加载外部 svg 后 $('#button').click(function () { world.select("#italy").attr({fill: "green"}); });。

此 world.svg 文件取自维基百科。

Answer 1

这里有两种基本方法：

在外部 SVG 的 Snap.load 回调中添加 click 绑定：

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"});
    });
});

使用闭包共享对加载的外部 SVG 的引用：

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

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

    //...

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

第一个的优点是你不需要处理在加载SVG之前点击按钮的情况。单击事件将被忽略。

检查whether document.ready would be better than window.load。

Answer 2

我正在尝试两种方法：我收到第一个 "ReferenceError: world is not defined"

$(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"});
         });
     });

如何使用 jQuery onclick 函数在外部 svg 文件上触发 snap.svg 效果？

How can I trigger a snap.svg effect on a external svg file using jQuery onclick function?

jquery

svg

raphael

snap.svg