HTML/JS中导入长SVG实现砸蛋游戏动画及点击事件绑定方案

问题根源 #

你遇到的问题主要来自两个点：

1. 循环生成<object>时，若用相同ID绑定事件，DOM只会识别第一个匹配元素；
2. <object>加载外部SVG是异步过程，直接绑定事件可能SVG尚未加载完成，导致事件绑定失效。

可行解决方案及示例 #

方案1：事件委托（推荐，适配异步加载场景） #

利用事件冒泡机制，给鸡蛋容器绑定统一的点击事件，无需等待SVG加载完成，且能覆盖所有动态生成的鸡蛋。

PHP代码（生成鸡蛋容器）

<?php
// 外部SVG皮肤路径列表
$eggSvgPaths = [
    'skins/egg-1.svg',
    'skins/egg-2.svg',
    'skins/egg-3.svg',
    'skins/egg-4.svg',
    'skins/egg-5.svg',
    'skins/egg-6.svg'
];
?>

<div class="eggs-wrap">
    <?php foreach ($eggSvgPaths as $idx => $path): ?>
        <object 
            type="image/svg+xml" 
            data="<?= $path ?>" 
            class="egg-item" 
            data-egg-id="<?= $idx ?>"
            style="width: 120px; height: 150px; margin: 0 10px;"
        ></object>
    <?php endforeach; ?>
</div>

JavaScript代码（绑定事件与破裂逻辑）

// 给容器绑定点击事件，通过冒泡触发
document.querySelector('.eggs-wrap').addEventListener('click', function(e) {
    const eggObj = e.target.closest('.egg-item');
    if (eggObj) {
        startCrack(eggObj);
    }
});

function startCrack(eggElement) {
    // 获取SVG文档对象（同域下有效）
    const svgDoc = eggElement.contentDocument;
    if (!svgDoc) return;

    // 示例：显示SVG内部的破裂图层（假设SVG里有.crack类的元素）
    const crackLayer = svgDoc.querySelector('.crack');
    if (crackLayer) {
        crackLayer.style.display = 'block';
        crackLayer.style.animation = 'crack 0.5s ease-out forwards';
    }

    console.log(`鸡蛋${eggElement.dataset.eggId}触发破裂`);
}

方案2：监听SVG加载完成后绑定事件 #

若需要直接操作SVG内部元素，可监听<object>的load事件，确保SVG加载完成后再绑定点击逻辑。

JavaScript代码

document.querySelectorAll('.egg-item').forEach(egg => {
    egg.addEventListener('load', function() {
        // 给当前鸡蛋绑定点击事件
        this.addEventListener('click', () => startCrack(this));
        
        // 或者直接给SVG内部绑定事件
        const svgDoc = this.contentDocument;
        if (svgDoc) {
            svgDoc.querySelector('svg').addEventListener('click', () => startCrack(this));
        }
    });
});

function startCrack(eggElement) {
    // 破裂逻辑同方案1
    const svgDoc = eggElement.contentDocument;
    if (svgDoc) {
        const crackLayer = svgDoc.querySelector('.crack');
        if (crackLayer) {
            crackLayer.style.display = 'block';
        }
    }
}

补充提示 #

• 若SVG与页面跨域，无法访问contentDocument，建议将SVG内容通过PHP读取后内联输出（虽然代码冗长，但避免跨域问题）：

  <?php foreach ($eggSvgPaths as $idx => $path): ?>
      <div class="egg-item" data-egg-id="<?= $idx ?>">
          <?= file_get_contents($path) ?>
      </div>
  <?php endforeach; ?>
  

• 也可直接在外部SVG文件内部绑定事件（同域下可用），在SVG末尾添加：

  <script type="text/javascript">
      document.querySelector('svg').addEventListener('click', function() {
          parent.startCrack(this); // 调用父页面的破裂函数
      });
  </script>
  

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