无法修改HTML时，如何批量替换所有<image>标签的xlink:href属性？

JavaScript 方案（直接修改属性，推荐） #

通过JS遍历所有<image>标签，直接替换xlink:href属性值，同时兼容现代SVG的href属性：

// 获取页面中所有SVG image元素
const allSvgImages = document.querySelectorAll('image');
allSvgImages.forEach(imgEl => {
  // 替换xlink:href属性
  imgEl.setAttribute('xlink:href', './beautiful.png');
  // 兼容部分现代SVG规范的href属性
  imgEl.setAttribute('href', './beautiful.png');
});

如果这些<image>标签嵌套在特定SVG容器内，可以把选择器改成#目标SVG的ID image来精准定位，避免影响其他无关元素。

CSS 方案（视觉替换，非修改属性） #

由于CSS无法直接修改SVG元素的属性，只能实现视觉上的替换效果：

1. 先隐藏原图片：给所有<image>标签设置透明或隐藏样式
2. 在<image>的父SVG元素上设置背景图作为替代
   示例代码：

/* 隐藏原SVG image */
image {
  opacity: 0;
}

/* 给SVG容器设置背景图替代原图片 */
svg {
  background-image: url('./beautiful.png');
  background-size: cover;
  background-position: center;
}

这种方法的局限性：如果同一个SVG内有多个<image>，会共用同一张背景图；且原图片的位置、尺寸可能和背景图不匹配，需要额外调整样式参数。

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