如何在 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 上的事件：

$(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>

The tabindex attribute allows you to control whether an element is focusable, and ...

有关详细信息，请参阅 MDN docs。

如何在 svg 上监听键盘事件

How to listen keyboard events on svg

javascript

events

svg

keydown

d3.js