Question

我是svg＆s的新手，并为其添加了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>添加到每个多边形外，是否有人知道如何使其工作？

Answer 1

不，这不起作用。 CSS仅用于演示。有许多方法可以使用CSS选择器来附加行为。最低级别是querySelector和querySelectorAll。恕我直言最容易和最常用的是jquery。

这里承诺的是片段......

＆＃13;

$("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")
})

＆＃13;

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

＆＃13;

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

＆＃13;

我可以在css部分的svg多边形中添加一个函数吗？

1 个答案: