如何在SVG上监听键盘事件

Question

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

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

需要帮助吗？提前致谢。

- Harshal

---

当你说“no luck”时，你的意思是什么？ - Lars Kotthoff

正如你所说，这与D3.js有关，请查看以下SO问答，其中提到了可能的解决方案：https://dev59.com/zGUp5IYBdhLWcg3wdXaa - SaschaM78

没有运气意味着控制权不在处理程序中。 SaschaM78感谢您的帮助，我不想在整个页面上监听键盘事件，我只想在SVG上监听键盘事件，因为我在页面上还有其他组件。 - Harshal

SVG 1.1 不支持键盘事件（参见第16.2节）。SVG 2 将支持它们。 - collapsar

Answer 1

由于SVG不是一个输入类型，所以要在窗口上监听事件：

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

- Diodeus - James MacFarlane

Answer 2

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

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文档。

- DarthVanger

---

这个有效，谢谢Darth。 - Mattis