为何HTML模板导入的SVG选择器不生效？如何解决？

问题原因 #

用<object>标签加载的SVG是独立的文档上下文，主页面的CSS样式和JS代码无法直接穿透访问SVG内部的元素，这就是样式不生效、点击事件绑定失败的核心原因。

解决方案 #

方案1：在SVG文件内部嵌入样式与脚本 #

直接把样式和事件逻辑写在SVG文件里，这样无论用哪种方式导入，SVG自身的样式和交互都能正常工作，这是最稳妥的方法，也不存在跨域问题。

修改你的SVG文件，在<svg>标签内添加以下内容：

<style>
/* SVG元素没有background属性，这里用fill设置填充色，cursor属性有效 */
.desired {
  fill: red;
  cursor: pointer;
}
</style>
<script>
// 等待SVG内部DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  const desiredElements = document.querySelectorAll('.desired');
  desiredElements.forEach(element => {
    element.addEventListener('click', () => {
      console.log('"desired"');
    });
  });
});
</script>

方案2：通过主页面JS访问SVG内部文档 #

如果不想修改SVG文件，可以在主页面中监听<object>的加载完成事件，然后获取SVG内部的文档对象，再动态注入样式和绑定事件。注意：此方法仅适用于SVG与主页面同域的情况，跨域会被浏览器安全策略阻止。

首先给<object>添加ID方便获取：

<object
  type="image/svg+xml"
  data="https://svgshare.com/i/xRE.svg"
  class="logo"
  id="svg-container"
>
</object>

然后修改主页面的JS代码：

const svgObj = document.getElementById('svg-container');

// 监听SVG加载完成事件
svgObj.addEventListener('load', function() {
  // 获取SVG内部的文档对象
  const svgDoc = svgObj.contentDocument;
  if (!svgDoc) return;

  // 动态注入样式到SVG内部
  const styleEl = document.createElement('style');
  styleEl.textContent = `
    .desired {
      fill: red;
      cursor: pointer;
    }
  `;
  svgDoc.head.appendChild(styleEl);

  // 绑定点击事件到SVG内部元素
  const desiredElements = svgDoc.querySelectorAll('.desired');
  desiredElements.forEach(element => {
    element.addEventListener('click', () => {
      console.log('"desired"');
    });
  });
});

补充说明 #

你原来的CSS里写了background: red，但SVG元素并没有background属性，对于SVG的形状元素（如<path>、<rect>等），需要用fill属性设置填充色；如果要给整个SVG区域加背景，可以在SVG内添加一个铺满视口的<rect>元素，并给它设置填充色。

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