javascript - SVG 的弹出效果或缩放效果

Question

我在 SVG 中创建了多个形状，并添加了一个效果，当鼠标悬停在形状上时会更改形状颜色。

但是如何让形状在悬停时稍微“弹出”呢？

非常感谢任何帮助。

Answer 1

您可以修改transform每个元素。大概是这样的:

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

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

但实际上你不需要采取使用属性的漫长而缓慢的方式，而是可以使用SVG元素的transform接口(interface)。因此，该文档也位于上面链接的页面上。但第一次处理这个问题可能有点“不直观”，因为每个元素都有一个带有多个转换项的转换列表。

我认为深入研究 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);

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