Question

我有一个包含许多不同元素的复杂svg文件。我想为一些元素（或元素组）添加效果，以便它们在悬停时变大。当指针离开它们的区域时，它们应该恢复到原始大小。这是一个很好的方法吗？

我可以创建大型元素的隐藏副本并在悬停时显示它们并在之后隐藏它们，但是有更好的方法吗？我可以使用图书馆，如果有一个对此非常有帮助的图书馆。

Answer 1

这是一个简单的例子，用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>

如何添加效果，将鼠标悬停在SVG元素上会使其变大？

1 个答案: