我有一个复杂的 svg 文件，其中包含许多不同的元素。我想为某些元素(或元素组)添加效果，以便它们在悬停时变得更大。当指针离开它们的区域时，它们应该恢复到原来的大小。有什么好的方法可以做到这一点？
我可以创建大元素的隐藏副本，并在悬停时显示它们，然后隐藏它们，但是有更好的方法吗？如果有一个对此非常有帮助的图书馆，我可以使用它。
最佳答案
这是一个简单的示例，可以使用 D3.js 实现您想要的功能。这是一个很大的图书馆，但确实值得学习。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id="viz"></div>
<script type="text/javascript">
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 100)
.attr("height", 100);
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 14)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function(){d3.select(this)
.style("fill", "green")
.transition()
.duration(1000)
.attr("r", 28);})
.on("mouseout", function(){d3.select(this)
.style("fill", "white")
.transition()
.duration(1000)
.attr("r", 14);})
</script>
</body>
</html>
关于javascript - 如何添加效果，以便将鼠标悬停在 SVG 元素上使其变大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28950276/