KineticJS: How can I use an SVG Sprite with KineticJS Sprites?

问题

I have a SVG sprite with looks like the following schema:

Image Image Image  
Image Image Image  
Image Image Image

Where Image is an image and all nine images are the sprite. They are all on one layer.

There is a tutorial for sprites with PNG files here but I could not find how to make SVG files work.

How do I set the coordinates for the frames when I use an SVG sprite? How do I use an SVG sprite?

Edit: Here is the code for the tutorial.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: #222;
        display: inline-block;
        width: 580px;
        height: 202px;
      }
      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <input type="button" id="punch" value="Punch">
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      var imageObj = new Image();
      imageObj.onload = function() {
        var blob = new Kinetic.Sprite({
          x: 250,
          y: 40,
          image: imageObj,
          animation: 'idle',
          animations: {
            idle: [
              // x, y, width, height (4 frames)
              2,2,70,119,
              71,2,74,119,
              146,2,81,119,
              226,2,76,119
            ],
            punch: [
              // x, y, width, height (3 frames)
              2,138,74,122,
              76,138,84,122,
              346,138,120,122
            ]
          },
          frameRate: 7,
          frameIndex: 0
        });

        // add the shape to the layer
        layer.add(blob);

        // add the layer to the stage
        stage.add(layer);

        // start sprite animation
        blob.start();

        var frameCount = 0;

        blob.on('frameIndexChange', function(evt) {
          if (blob.animation() === 'punch' && ++frameCount > 3) {
            blob.animation('idle');
            frameCount = 0;
          }
        });

        document.getElementById('punch').addEventListener('click', function() {
          blob.animation('punch');
        }, false);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/blob-sprite.png';
    </script>
  </body>
</html>

回答1:

As you provided no code, click here to get the idea and have some nice tutorial regarding the frame by frame animation of SVGs. I'd never recommend it though, simply because you'll have a vector based element on each frame whose anchor points, curves etc behave independently from each other. So for just a small part to animate, it will have to load all of the points, colors over and over again. You can create a SVG that animates instead.

来源：https://stackoverflow.com/questions/24758442/kineticjs-how-can-i-use-an-svg-sprite-with-kineticjs-sprites

标签

javascript

html

html5

canvas

kineticjs