如何通过JavaScript访问CSS background中嵌入的SVG元素？

我将SVG通过data URI作为元素的background嵌入到CSS中，代码如下：

<div class="box"></div>

.box {
  width: 300px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect id="rect" width="100" height="100" fill="red"><animate attributeName="x" from="0" to="400" dur="6s" repeatCount="indefinite"/></rect></svg>');
}

之后我尝试用JavaScript获取SVG里的#rect元素：

window.onload = function() {
  // ...but this still logs null
  console.log(document.getElementById("rect"));
}

但控制台始终输出null，请问有没有办法获取该<rect>元素的引用？

为什么获取不到？ #

作为CSS背景图的SVG是作为独立的图像资源加载的，它不属于当前页面的DOM树结构，所以你无法通过document.getElementById()这类针对当前DOM的API直接访问它内部的元素。

解决方案 #

方案1：将SVG直接嵌入HTML（推荐）

如果需要操作SVG内部元素，最直接的方式是把SVG直接写在HTML里，而非作为背景图。这样SVG就属于当前DOM树的一部分，可以直接访问：

<div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <rect id="rect" width="100" height="100" fill="red">
      <animate attributeName="x" from="0" to="400" dur="6s" repeatCount="indefinite"/>
    </rect>
  </svg>
</div>

对应的CSS可以调整为：

.box {
  width: 300px;
  height: 200px;
  position: relative;
}
.box svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 将SVG置于容器底层，模拟背景图效果 */
}

之后再执行document.getElementById('rect')就能正常获取到元素引用，且修改元素属性会直接反映到页面显示上。

方案2：解析data URI获取SVG文档（仅用于读取或离线修改）

如果必须保留CSS背景图的方式，你可以通过解析background的data URI，创建独立的SVG文档对象来获取元素，但这种方式获取到的元素无法直接影响页面上的背景图（因为背景图是已渲染的静态资源）：

window.onload = function() {
  const box = document.querySelector('.box');
  const bgStyle = getComputedStyle(box).backgroundImage;
  // 提取data URI中的SVG内容
  const svgMatch = bgStyle.match(/data:image\/svg\+xml;utf8,(.*?)'/);
  if (!svgMatch) return;
  
  let svgContent = svgMatch[1];
  // 替换转义的引号并解码URI
  svgContent = decodeURIComponent(svgContent.replace(/"/g, '"'));
  
  // 解析SVG为独立文档
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
  const rect = svgDoc.getElementById('rect');
  
  console.log(rect); // 成功获取rect元素
  // 如果需要修改后更新背景图，可以重新生成data URI
  const updatedSvg = new XMLSerializer().serializeToString(svgDoc);
  box.style.backgroundImage = `url('data:image/svg+xml;utf8,${encodeURIComponent(updatedSvg)}')`;
}

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