SVG 缩放预览：F12 无法定位子元素 & 放大模糊

场景：LayoutPreviewModal.vue，用 v-html 渲染布局 SVG，外层容器通过 transform: translate() scale() 实现拖拽平移与滚轮缩放。

问题一：F12 元素选择器点不到 SVG 子元素

现象

用 DevTools 左上角的「选择元素」工具点 SVG 内的线条、文字、图标，只能选中外层 div；删掉外层 DOM 后才能选中。

原因

样式里给 SVG 设置了：

less 复制代码

:deep(svg) {
  pointer-events: none;
}

html 复制代码

<template>
  <div
    class="preview-viewport"
    @pointerdown="onPointerDown"
    @pointermove="onPointerMove"
    @pointerup="onPointerUp"
    @wheel.prevent="onWheel"
    @dblclick="onReset"
  >
    <div
      class="preview-stage"
      :style="{ transform: `translate(${tx}px, ${ty}px) scale(${scale})` }"
      v-html="svgContent"
    />
  </div>
</template>

<style scoped lang="less">
.preview-stage {
  will-change: transform;

  :deep(svg) {
    pointer-events: none;   /* ← 元凶：SVG 对命中测试"隐身" */
  }
}
</style>

DevTools 的元素选择器依赖浏览器的命中测试（hit testing） ，和鼠标点击走的是同一套逻辑。pointer-events: none 让 SVG 及其子元素不参与命中测试，鼠标"穿透"到下层的父容器，所以选中的永远是外层 div。

删掉外层 DOM 能选中，并不是 DOM 层级的问题，而是 .preview-stage :deep(svg) 这条带作用域的选择器随之失效了。

解决

去掉 pointer-events: none 即可。是否影响功能要看事件绑在哪里：

拖拽 / 缩放 / 双击复位的事件都绑在外层 .preview-viewport 上；
SVG 子元素上的 pointerdown、wheel 等事件会冒泡到视口；
处理函数里用的是 event.currentTarget（始终是绑定事件的视口），而不是 event.target（可能是某个 <path>），setPointerCapture 也作用在视口上。

所以去掉后功能不变。额外加了一个 @dragstart.prevent，防止 SVG 内的 <image> 触发浏览器原生拖拽而打断平移。

html 复制代码

<template>
  <!-- 加 @dragstart.prevent，防止 SVG 内 <image> 触发原生拖拽打断平移 -->
  <div
    class="preview-viewport"
    @pointerdown="onPointerDown"
    @pointermove="onPointerMove"
    @pointerup="onPointerUp"
    @wheel.prevent="onWheel"
    @dblclick="onReset"
    @dragstart.prevent
  >
    <div
      class="preview-stage"
      :style="{ transform: `translate(${tx}px, ${ty}px) scale(${scale})` }"
      v-html="svgContent"
    />
  </div>
</template>

<style scoped lang="less">
.preview-stage {
  /* 去掉 will-change，见问题二 */
  /* 去掉 pointer-events: none，见问题一 */
}
</style>

配套的事件处理（保持不变即可）

关键在于用 currentTarget 而不是 target，让事件冒泡机制自然工作：

js 复制代码

function onPointerDown(e: PointerEvent) {
  // ✅ 用 currentTarget（绑定事件的视口），而不是 e.target（可能是某个 <path>）
  e.currentTarget.setPointerCapture(e.pointerId)
  dragging = true
  startX = e.clientX - tx
  startY = e.clientY - ty
}

function onPointerMove(e: PointerEvent) {
  if (!dragging) return
  tx = e.clientX - startX
  ty = e.clientY - startY
}

function onPointerUp(e: PointerEvent) {
  dragging = false
  e.currentTarget.releasePointerCapture(e.pointerId)
}

对比：如果处理函数里写的是 e.target.setPointerCapture(...)，去掉 pointer-events: none 后，e.target 可能是 SVG 里的 <path>，逻辑就错了。所以冒泡 + currentTarget 是去掉 pointer-events: none 后功能不变的前提。

小结

pointer-events: none 不只是"不响应点击"，它会让元素对 DevTools 选择器也"隐身"。
想让子元素不干扰交互，优先依靠事件冒泡 + currentTarget，而不是一刀切禁用指针事件。
区分 event.target（实际命中的最深元素）与 event.currentTarget（当前处理事件的元素）。

问题二：SVG 放大后变模糊

现象

SVG 是矢量图，但在预览里放大后线条、文字发虚，像被拉伸的位图。

排查

先排除素材问题 ：SVG 中的设备图标是 PNG（data.ts 引入），检查分辨率均在 1254px 以上，足够清晰，不是元凶。
再看缩放实现 ：缩放用的是 CSS transform: scale()，同时容器上有：

❌ 修改前

less 复制代码

.preview-stage {
  will-change: transform;   /* ← 元凶：提升合成层并冻结栅格化尺寸 */
  transform-origin: 0 0;
}

效果：transform: scale() 变化时 GPU 只拉伸已栅格化的位图纹理 → 放大模糊。

✅ 修改后

css 复制代码

.preview-stage {
  /* 删除 will-change: transform */
  transform-origin: 0 0;
}

效果：transform 变化后浏览器按新的缩放比例重新栅格化，SVG 恢复矢量级清晰度。

同类陷阱（也要避免）

css 复制代码

/* ❌ 这些写法同样会提升合成层，可能导致放大模糊 */
.preview-stage {
  transform: translateZ(0);      /* 强制 GPU 加速 */
  /* 或 */
  transform: translate3d(0,0,0);
  /* 或 */
  backface-visibility: hidden;   /* 有时也会触发合成层 */
}

如果后续真的遇到超大 SVG 卡顿，可选的 viewBox 方案

html 复制代码

<template>
  <div class="preview-viewport" ...>
    <!-- 直接改 SVG 的 width/height 或 viewBox，始终矢量清晰 -->
    <div
      class="preview-stage"
      :style="{ width: `${baseW * scale}px`, height: `${baseH * scale}px` }"
      v-html="scaledSvg"
    />
  </div>
</template>

但这种方案每次都走布局 + 重绘，改动最大，当前场景不推荐，只在性能实在扛不住时再考虑。

原因

will-change: transform 会提示浏览器把该元素提升为独立的合成层（compositing layer）。Chrome 对合成层的处理是：

按当时的尺寸把内容栅格化（rasterize）成一张位图纹理；
之后 transform 变化时，只由 GPU 对这张位图做平移 / 缩放，不再重新绘制。

这对动画性能很友好，但代价是：放大时拉伸的是位图，矢量信息丢失，于是模糊。

解决

去掉 will-change: transform。没有这个提示时，浏览器会在 transform 变化后按新的缩放比例重新栅格化，SVG 恢复矢量级清晰度。

取舍

方案	清晰度	性能
`transform: scale()` + `will-change`	放大模糊	最流畅，GPU 直接变换位图
`transform: scale()`（无 `will-change`）	清晰	缩放后需重绘，常规复杂度的图感知不到
修改 SVG 的 `width/height` 或 `viewBox`	始终清晰	每次都走布局 + 重绘，改动最大

本场景选择第二种：改动最小，效果满足需求。若后续遇到超大、超复杂的 SVG 导致拖拽卡顿，再考虑 viewBox 方案。

小结

will-change 不是"性能优化开关"，它有副作用：创建合成层、占用显存、冻结栅格化尺寸。
需要"缩放后保持清晰"的内容（SVG、文字、Canvas 之外的矢量内容），慎用 will-change: transform。
同类陷阱：transform: translateZ(0) / translate3d() 这类"强制开启 GPU 加速"的写法同样会提升合成层，可能导致模糊。
排查渲染问题时，可用 DevTools → More tools → Layers 面板查看哪些元素被提升为合成层；Rendering 面板勾选 "Layer borders" 可直观看到图层边界。

总结

点不到元素 → 先查 pointer-events。
矢量图被缩放后模糊 → 先查 will-change / 3D transform 导致的合成层位图拉伸。