如何基于可见圆形Div状态，用jQuery/JS动态调整SVG多边形坐标？

我有12个圆形Div，分为3列，每列4个（A、B、C、D）。同一时间总共只有6个圆形可见，且每列仅显示2个（1红1绿）。我想在这些圆形后方放一个蓝色SVG形状，让它的顶点坐标和可见圆形的轮廓匹配。下面是静态的蓝色形状SVG代码：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#88C9FF;}
</style>
<polygon class="st0" points="100,217.62 400,97.5 700,215.09 700,559.12 400,702.53 100,702.53 "/>
</svg>

请问能不能让这个SVG形状实现动态效果？基于圆形的可见性，用jQuery或JavaScript来设置形状顶点的X、Y坐标？我的思路是：如果circle-1可见，就把它的X、Y坐标作为SVG的第一个顶点，以此类推处理6个可见圆形。

完全可以实现，核心是实时提取可见圆形的坐标，更新SVG多边形的顶点。下面是具体实现方案：

1. 前置准备 #

• 给所有圆形Div统一添加类名（比如.circle），同时给每个圆形设置唯一ID（如circle-1至circle-12），方便定位。
• 修改SVG，给<polygon>元素添加ID（比如dynamic-shape），便于后续操作。

2. 代码实现 #

jQuery版本 #

// 定义更新SVG形状的函数
function updateSVGShape() {
    const visiblePoints = [];
    // 遍历所有可见的圆形
    $('.circle:visible').each(function() {
        const $circle = $(this);
        // 计算圆形中心坐标（如果需要轮廓边缘，可根据位置调整）
        const centerX = $circle.offset().left + $circle.width() / 2;
        const centerY = $circle.offset().top + $circle.height() / 2;
        visiblePoints.push(`${centerX},${centerY}`);
    });

    // 仅当刚好有6个可见圆形时更新顶点
    if (visiblePoints.length === 6) {
        $('#dynamic-shape').attr('points', visiblePoints.join(' '));
    }
}

// 页面初始化时执行一次
updateSVGShape();

// 示例：监听圆形可见性切换事件（需根据实际切换逻辑调整）
$('.toggle-circle-btn').click(function() {
    // 这里写切换圆形显示/隐藏的逻辑
    updateSVGShape(); // 更新SVG形状
});

原生JavaScript版本 #

function updateSVGShape() {
    const visiblePoints = [];
    const circles = document.querySelectorAll('.circle:visible');
    
    circles.forEach(circle => {
        const rect = circle.getBoundingClientRect();
        // 计算中心坐标，加上滚动偏移确保坐标准确
        const centerX = rect.left + rect.width / 2 + window.scrollX;
        const centerY = rect.top + rect.height / 2 + window.scrollY;
        visiblePoints.push(`${centerX},${centerY}`);
    });

    if (visiblePoints.length === 6) {
        document.getElementById('dynamic-shape').setAttribute('points', visiblePoints.join(' '));
    }
}

// 初始化执行
updateSVGShape();

// 示例：监听切换按钮事件
document.querySelector('.toggle-circle-btn').addEventListener('click', function() {
    // 切换圆形可见性的逻辑
    updateSVGShape();
});

3. 细节调整 #

• 如果需要匹配圆形轮廓边缘而非中心，可以给每个圆形添加data-position属性（如data-position="top-left"），根据属性计算对应边缘坐标（比如左列顶部圆形取右上边缘，右列顶部取左上边缘）。
• 若页面存在滚动，原生JS需加上window.scrollX/window.scrollY修正坐标，jQuery的offset()已包含滚动偏移，无需额外处理。
• 频繁切换可见性时，可给updateSVGShape添加防抖处理，避免重复计算。

内容的提问来源于stack exchange，提问作者marklovin