如何无需重复HTML实现同一网页局部的非交互式预览？

给你几个可行的实现思路，不用手动同步内容就能搞定：

方法一：用CSS element() 函数（最简单但兼容性有限） #

直接把目标元素当作预览区的背景图，自动同步所有内容和样式，连伪类变化都能捕获。

/* 预览容器样式 */
.minimap {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.2); /* 缩放比例可自行调整 */
  transform-origin: top right;
  width: calc(100vw * 0.2); /* 宽度对应缩放比例，保证背景完整显示 */
  height: calc(100vh * 0.2);
  background-image: element(#main-svg-container); /* #main-svg-container是你要预览的元素ID */
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none; /* 禁用交互，避免干扰原元素 */
}

⚠️ 注意：目前只有Chrome、Edge原生支持，Firefox需要手动开启layout.css.element-function.enabled配置。

方法二：克隆元素+自动同步（兼容性拉满） #

先克隆目标元素到预览区，再用监听工具自动同步原元素的变化，不用手动维护状态。

代码示例： #

const mainElement = document.getElementById('main-svg-container');
const minimap = document.createElement('div');
minimap.className = 'minimap';
document.body.appendChild(minimap);

// 先克隆一次初始内容
const clone = mainElement.cloneNode(true);
minimap.appendChild(clone);

// 监听原元素的DOM变化（属性、子节点、文本），自动同步到克隆元素
const domObserver = new MutationObserver(() => {
  // 简单直接的方式：重新克隆（复杂场景可按需同步单个变更优化性能）
  minimap.innerHTML = '';
  minimap.appendChild(mainElement.cloneNode(true));
});
domObserver.observe(mainElement, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

// 监听原元素尺寸变化，同步克隆元素的尺寸
const resizeObserver = new ResizeObserver(() => {
  const clone = minimap.firstElementChild;
  clone.style.width = `${mainElement.offsetWidth}px`;
  clone.style.height = `${mainElement.offsetHeight}px`;
});
resizeObserver.observe(mainElement);

.minimap {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) scale(0.2);
  transform-origin: top right;
  overflow: hidden;
  pointer-events: none;
}

这个方法能兼容所有现代浏览器，只要确保克隆元素的样式和原元素一致就行（可以把原元素的样式抽成类，克隆元素直接继承）。

方法三：Canvas绘制（适合SVG为主的场景） #

如果你的核心是SVG，可以把SVG转成Canvas图像，在预览区显示缩放后的版本，视觉还原度极高。

代码示例： #

const svgElement = document.getElementById('main-svg');
const minimapCanvas = document.createElement('canvas');
minimapCanvas.className = 'minimap';
document.body.appendChild(minimapCanvas);
const ctx = minimapCanvas.getContext('2d');

// 更新预览图的函数
function updateMinimap() {
  // 把SVG转成DataURL
  const svgData = new XMLSerializer().serializeToString(svgElement);
  const img = new Image();
  img.onload = () => {
    const scale = 0.2; // 缩放比例
    minimapCanvas.width = img.width * scale;
    minimapCanvas.height = img.height * scale;
    ctx.drawImage(img, 0, 0, minimapCanvas.width, minimapCanvas.height);
  };
  img.src = `data:image/svg+xml;base64,${btoa(svgData)}`;
}

// 初始更新一次
updateMinimap();

// 监听SVG的变化，自动更新预览
const observer = new MutationObserver(updateMinimap);
observer.observe(svgElement, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

.minimap {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

如果还有HTML框架元素，可以用html2canvas库把整个容器转成Canvas，不过要注意性能，别太频繁更新。

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