如何将SVG鼠标模糊揭示效果的circle遮罩替换为diamond形状path元素

开发者阿泽

2026-9-25

实现方案

第一步：修改SVG中mask内的元素

把原来<mask>标签内的<circle>元素替换为菱形path元素即可，基础的菱形路径以坐标(0,0)为中心，和原来圆形的中心点逻辑完全对齐：

<mask id="mask1">
    <!-- 替换原有的circle元素为下面的path，d属性定义了对角半径为40px的菱形，和原圆形大小匹配 -->
    <path d="M 0 -40 L 40 0 L 0 40 L -40 0 Z" fill="white" filter="url(#filter2)" transform="translate(-999, -999)" />
</mask>

第二步：修改JS控制逻辑

原来的逻辑是修改圆形的cx、cy属性，现在改为修改path的transform位移属性即可：

$('.pic').mousemove(function (event) {
    event.preventDefault();
    // 用offsetX/offsetY获取相对.pic容器的坐标，避免容器不在页面左上角时出现坐标偏移
    const upX = event.offsetX ?? event.clientX;
    const upY = event.offsetY ?? (event.clientY - 5);
    const mask = $('#mask1 path')[0];
    mask.setAttribute("transform", `translate(${upX}, ${upY})`);
});