Konva 画布中的 SVG 动画

Question

我想将动画 SVG 添加到 Konva 画布中。我尝试将其与图像对象一起添加。 SVG 会显示，但不是动画。

我还尝试向图层添加动画，如 Konva 的视频演示中所示，但这也不起作用。

有人知道如何进行这项工作吗？

 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>

Answer 1

据我所知，目前还没有针对此类用例的解决方案。

使用 SVG 而不是画布可能会更好 (

Konva

)。 或者直接在画布上绘图，无需 SVG。

Answer 2

我目前正在尝试在画布上渲染来自 twitch 的动画表情。

这还是不行还是现在有解决办法吗？