[SOLVED] SVG Animations in Konva canvas

SVG Animations in Konva canvas

I would like to add an animated SVG to an Konva canvas. I tried to add it with an Image object. The SVG shows, but it's not animated.

I also tried adding an animation to the layer as shown in the video demo of Konva, but that doesn't work either.

Anybody got an idea how to make this work?

 var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // main API:
      var imageObj = new Image();
      imageObj.onload = function() {
        var image = new Konva.Image({
          x: 50,
          y: 50,
          image: imageObj,
          width: 240,
          height: 180
        });

        // add the shape to the layer
        layer.add(image);
        layer.batchDraw();
      };
      
      var animation=new Konva.Animation(function(){
      
      },layer);
      animation.start();
      
      
      imageObj.src = 'data:image/svg+xml;base64,DQogICAgPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYwLjcgNDQuNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjAuNyA0NC40OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQogICAgICAgIDwhW0NEQVRBWw0KICAud2hpdGUge2ZpbGw6I0ZGRkZGRn0NCi5ncmF5IHtmaWxsOiNFMEUwRTB9DQoueWVsbG93IHtmaWxsOiNGRkVCM0J9DQogIF1dPg0KICAgIDwvc3R5bGU+DQoNCiAgICAgICAgPGcgaWQ9IkNsb3VkXzUiPg0KICAgIAkgICAgICAgIDxnIGlkPSJXaGl0ZV9jbG91ZF81Ij4NCiAgICAJCSAgICAgICAgPHBhdGggaWQ9IlhNTElEXzQ5XyIgY2xhc3M9IndoaXRlIiBkPSJNNDcuMiw0NC40SDcuOWMtNC4zLDAtNy45LTMuNS03LjktNy45bDAsMGMwLTQuMywzLjUtNy45LDcuOS03LjloMzkuNGM0LjMsMCw3LjksMy41LDcuOSw3LjkgdjBDNTUuMSw0MC45LDUxLjYsNDQuNCw0Ny4yLDQ0LjR6Ii8+DQogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9IlhNTElEXzQ4XyIgY2xhc3M9IndoaXRlIiBjeD0iMTcuNCIgY3k9IjI3LjIiIHI9IjkuMyIvPg0KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJYTUxJRF80N18iIGNsYXNzPSJ3aGl0ZSIgY3g9IjM0LjUiIGN5PSIyNS41IiByPSIxNS42Ii8+DQogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlVHlwZT0iWE1MIg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkdXI9IjZzIg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDswLjU7MSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGU9InRyYW5zbGF0ZSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIwOzU7MCINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciI+DQogICAgICAgICAgICAgICAgPC9hbmltYXRlVHJhbnNmb3JtPg0KICAgIAkgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICA8cGF0aCBpZD0iTW9vbl81IiBjbGFzcz0ieWVsbG93IiBkPSJNMzMuNiwxNy45Yy0wLjItNy43LDQuOS0xNC40LDEyLTE2LjRjLTIuMy0xLTQuOS0xLjUtNy42LTEuNWMtOS44LDAuMy0xNy41LDguNS0xNy4yLDE4LjMgYzAuMyw5LjgsOC41LDE3LjUsMTguMywxNy4yYzIuNy0wLjEsNS4yLTAuOCw3LjUtMS45QzM5LjMsMzIsMzMuOCwyNS42LDMzLjYsMTcuOXoiLz4NCiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JheV9jbG91ZF81Ij4NCiAgICAJCSAgICAgICAgPHBhdGggaWQ9IlhNTElEXzQ1XyIgY2xhc3M9ImdyYXkiIGQ9Ik01NC43LDI2LjhIMzMuNGMtMy4zLDAtNi0yLjctNi02djBjMC0zLjMsMi43LTYsNi02aDIxLjNjMy4zLDAsNiwyLjcsNiw2djAgQzYwLjcsMjQuMSw1OCwyNi44LDU0LjcsMjYuOHoiLz4NCiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iWE1MSURfNDNfIiBjbGFzcz0iZ3JheSIgY3g9IjQ1LjciIGN5PSIxNS4xIiByPSIxMC43Ii8+DQogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlVHlwZT0iWE1MIg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkdXI9IjZzIg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDswLjU7MSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGU9InRyYW5zbGF0ZSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIwOy0zOzAiDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiPg0KICAgICAgICAgICAgICAgIDwvYW5pbWF0ZVRyYW5zZm9ybT4NCiAgICAJICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgICAgPC9zdmc+';

*{
  margin:0;
  padding:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.13/konva.min.js"></script>
 <div id="container"></div>

Solution

As far as I know, there are no solutions for such a use case at the current moment.

It may be better to just use SVG instead of the canvas (Konva). Or make drawings directly into the canvas, without SVG.