Question

我在SVG中创建了几个形状，并添加了一种效果，可以在悬停时改变形状颜色。

但是如何制作形状＆＃34;弹出＆＃34;在徘徊时略微？

感谢任何帮助。

Answer 1

您可以修改每个元素的transform。可能是这样的：

function onEnter (e) {
    e.target.setAttribute('transform', 'scale(2,2)');
}

function onLeave (e) {
    e.target.removeAttribute('transform');
}

但实际上你不需要使用属性的慢速方式，而是可以使用SVG元素的transform接口。因此，文档也在上面链接的页面上。但是第一次处理这个问题可能有点“不直观”，因为每个元素都有transform list个transform items。

我认为在svg变换界面（以及一般的仿射变换）中潜入是一个好主意，因为它非常强大，但在你准备好使用它之前需要一个“学习曲线”。

如果你想要短路，你也可以使用辅助框架，如：svg.js，snapsvg或raphael这些都有通用的方法来帮助你处理这样的事情。

修改

上述功能只是可以做到的例子。仅当鼠标进入svg元素或离开时，才应调用onEnter和onLeave方法。因此，您可以添加mousemove侦听器并检查目标是否是您所需的元素之一：

var firstElement = document.getElementById('<yourelementsid>'); isOverFirstElement = false; window.addEventListener('mousemove', function (e) { if (e.target === firstElement && isOverFirstElement == false) { isOverFirstElement = true; onEnter(e); } else if (e.target !== firstElement && isOverFirstElement == true) { isOverFirstElement = false; onLeave(e); } }, false);

使用这样的代码，您可以检测到鼠标进入或离开并做出相应的反应。

Answer 2

我已经通过添加

来做我想做的事了

target.setAttributeNS(null, 'transform', "translate(0 0)");

因此：

function unselectedColour(evt) {
var target = evt.target;
target.setAttributeNS(null, 'fill', 'white');
target.setAttributeNS(null, 'transform', "translate(0 0)");

}

function selectedColourBuilding(evt) {
var target = evt.target;
target.setAttributeNS(null, 'fill', 'purple');
target.setAttributeNS(null, 'transform', "translate(-3 -3)");

}

Answer 3

要使'弹出'稳定，在缩放时将其保持在当前位置，您可以计算其边界框的中心，然后将元素的中心转换为原点，缩放它，然后转换回其当前位置< / p>

e.g。

function onEnter(evt)
{
    var target=evt.target
    var bb=target.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height
    var cx=bbx+.5*bbw
    var cy=bby+.5*bbh
    target.setAttribute("transform","translate("+(cx)+" "+(cy)+")scale(1.2 1.2)translate("+(-cx)+" "+(-cy)+")")
}
function onExit(evt)
{
    var target=evt.target
    target.removeAttribute("transform")

}

使用SVG弹出效果或缩放效果

3 个答案: