javascript - 我可以在 css 部分向 svg 多边形添加函数吗？

Question

我对 svg 和向其添加 javascript 非常陌生。

我正在尝试生成通过 CSS 部分获取所有功能的图形。现在我想向不同的对象添加功能，但我什至不确定这是否可能像我在示例中所做的那样，因为它不起作用:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11,dtd">
<svg width="9668pt" height="2132pt" viewBox=0.00 0.00 9668.29 2132.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css"><![CDATA[
      .node:hover polygon { stroke: yellow; fill: yellow; onclick:'myFunc(evt)';}
      .node: polygon { stroke: yellow; fill: yellow; onclick:'myFunc(evt)';}
    ]]></style>
    <script type="text/javascript"><![CDATA[
      function myFunc(evt) {
        //do sth...
      }
    ]]></script>
  </defs>
  <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 2128)">
    <title>MyTest</title>
    <polygon fill="white" stroke="none" points="-4,4 -4,-2128 9664.29,-2128 9664.29,4 -4,4"/>
    <g id="myTestNode" class="node">
      <title>Box</title>
      <polygon points="7270.09,2124 7208.09,-2124 7208.09,-2088 7270.09,-2088 7270.09,-2124">
    </g>
  </g>
</svg>

除了将 onclick=myFunc(evt) 添加到每个多边形之外，有没有人知道如何使它工作？

Answer 1

不，那行不通。 CSS 仅用于演示。有很多方法可以使用 CSS 选择器来附加行为。最低级别是 querySelector 和 querySelectorAll。恕我直言，最简单和最常用的是 jquery。

这里 promise 的是片段...

$("rect").hover(function(event) {
  $("#out1").text("hover: " + event.target.getAttribute("class"))
})
$(".same").click(function(event) {
  $("#out1").text("click: " + event.target.getAttribute("class"))
})
$(".other").click(function(event) {
  $("#out1").text("some other element was clicked")
})

.one {
  fill: red
}
.two {
  fill: green
}
.three {
  fill: blue
}
.four {
  fill: yellow
}
rect:hover {
  fill: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg viewBox="0 0 100 100" width="200" height="200">
  <rect class="one same" x="0" y="0" width="50" height="50" />
  <rect class="two same" x="50" y="0" width="50" height="50" />
  <rect class="three other" x="0" y="50" width="50" height="50" />
  <rect class="four none" x="50" y="50" width="50" height="50" />
</svg>

<div id="out1"></div>