如何在SVG上监听键盘事件

Question

我有一个svg，可以在该svg上绘制多个形状。现在我的要求是我想听键盘事件，例如ctrl + C，ctrl + V，ctrl + D，Esc，Delete，以便我可以复制，粘贴，复制所选形状。但是我不知道在SVG上监听键盘事件。我尝试下面的代码，但没有运气！

 mySVG.on("keydown", function () {
        //code to handle keydown
  });

有什么帮助吗？提前致谢。

Answer 1

由于SVG不是输入类型，因此请在窗口上侦听事件：

$(window).on('keypress', function (evt){ ... })

Answer 2

添加tabindex="0"属性，<svg>它将起作用：

const svgElement = document.querySelector('svg');

svgElement.addEventListener('keydown', event => {
  console.log('svg keydown: ', event.key);
});

<svg tabindex="0" width="300" height="200">

  <rect width="100%" height="100%" fill="#555" />
  <text x="50%" y="50%" font-size="20" text-anchor="middle" fill="white">
    Click me and start typing
  </text>
  
</svg>

tabindex 属性允许您控制元素是否可聚焦，并且...

请参阅MDN 文档 以获取更多信息。