bansai/larscwallin.inx.bansai.template.html at master · larscwallin/bansai · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
        <html>
            <head>
                <title></title>
                <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>

            </head>
            <body>
                <script src='http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4.1/bonsai.min.js'></script>
                <div id='stage'></div>
                <script>
                  stage = document.getElementById('stage');

                  bonsai.run(stage, {
                    plugins: ['https://raw.github.com/larscwallin/bansai/master/larscwallin.inx.bansai.js'],
                    code: function() {
                        /*
                                The string "bonsai_content" within the comment below is a placeholder used to correctly
                                inject rendered json from the py script. Please do not change this.
                        */
                        var svgDoc = {/*bonsai_content*/};

                        /*
                                Go ninja go!
                        */
                        bansai.init(stage,svgDoc);


                        /*
                                - Reference your shapes using their Inkscape label.
                                Each label in the bansai.labels collection is an array meaning that
                                one label may be applied to many elements in your SVG. This is handy
                                if you want to iterate over a logical group of elements, such as clouds.

                                    var cloud = bansai.labels['cloud'][0];
                                    cloud.animate('10s',{x:250});

                                - or by their id, which contrary to label are of course unique.

                                    var sun = bansai.ids['g9675'];


                        */
                    }
                  });

                </script>

            </body>
        </html>