分层SVG交互性 - JavaScript库

Question

假设我有这样的插图，我想在用户悬停或点击图片中的某个人时在浏览器中添加交互性。是否有一个很好的Javascript库，允许导入SVG甚至PSD与图层并将其转换为浏览器中的单个对象？或者可能是HTML5画布。

Answer 1

虽然问题库的问题通常不适合SO，因为他们的答案具有固有的性质，你实际上可能通过本机HTML5 SVG支持+ CSS + JavaScript事件处理程序解决这个问题，而根本没有库：

＆＃13;

＆＃13;

document.getElementById("waldo").addEventListener("click", function() {
  console.log("Waldo clicked")
});

＆＃13;

svg #waldo:hover {
  fill: red;
}

＆＃13;

Hover over and click the blue box with id = waldo:
<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="0" y="0" width="100" height="100" fill="green" />
  <rect id="waldo" x="70" y="70" width="100" height="100" fill="blue" />
  <rect x="160" y="30" width="100" height="100" fill="yellow" />
</svg>

＆＃13;

＆＃13;

＆＃13;

PS：我找到了Waldo：