如何将SVG视图平移至衬衫正面/背面（视野外指定位置）？

兄弟，我太懂你折腾数月仍卡壳的憋屈了！咱们抛开那些不好用的第三方方案，用原生代码就能轻松实现这个切换功能，步骤简单还可控：

核心思路 #

把衬衫的正面和背面分别封装成SVG里的独立分组（<g>标签），通过控制这两个分组的显示/隐藏状态来实现切换效果，完全不用复杂的拖拽或缩放库。

具体实现步骤 #

1. 整理SVG结构 #

先把你的衬衫正面、背面元素分别放进两个带ID的<g>组里，初始状态下让背面隐藏：

<svg width="400" height="500" viewBox="0 0 400 500">
  <!-- 衬衫正面组 -->
  <g id="shirt-front" class="shirt-visible">
    <!-- 这里替换成你自己的正面衬衫SVG元素（路径、图案等） -->
    <rect x="100" y="100" width="200" height="250" fill="#f0f0f0" stroke="#333" stroke-width="2"/>
    <circle cx="200" cy="150" r="30" fill="#ddd"/>
    <path d="M150 200 L250 200" stroke="#333" stroke-width="2"/>
  </g>
  <!-- 衬衫背面组 -->
  <g id="shirt-back" class="shirt-hidden">
    <!-- 这里替换成你自己的背面衬衫SVG元素 -->
    <rect x="100" y="100" width="200" height="250" fill="#e0e0e0" stroke="#333" stroke-width="2"/>
    <path d="M150 200 L250 200" stroke="#333" stroke-width="2"/>
    <path d="M120 120 L280 120" stroke="#333" stroke-width="1.5" stroke-dasharray="5,5"/>
  </g>
</svg>

2. 加CSS控制显示状态 #

用CSS类来管理显示/隐藏，比直接操作style属性更优雅：

.shirt-visible {
  display: block !important;
}
.shirt-hidden {
  display: none !important;
}

3. 写切换按钮和JS逻辑 #

添加一个切换按钮，用几行原生JS实现点击切换：

<button id="toggle-shirt">切换衬衫正反面</button>

// 获取元素
const frontGroup = document.getElementById('shirt-front');
const backGroup = document.getElementById('shirt-back');
const toggleBtn = document.getElementById('toggle-shirt');

// 绑定点击事件
toggleBtn.addEventListener('click', () => {
  // 切换两个组的隐藏/显示类
  frontGroup.classList.toggle('shirt-hidden');
  backGroup.classList.toggle('shirt-hidden');
});

特殊情况处理（如果SVG是外部文件） #

要是你的SVG是通过<object>或<embed>引入的外部文件，只需稍作调整，先获取SVG文档对象再操作：

const svgObject = document.getElementById('external-shirt-svg');
// 等待SVG加载完成
svgObject.addEventListener('load', () => {
  const svgDoc = svgObject.contentDocument;
  const frontGroup = svgDoc.getElementById('shirt-front');
  const backGroup = svgDoc.getElementById('shirt-back');
  const toggleBtn = document.getElementById('toggle-shirt');

  toggleBtn.addEventListener('click', () => {
    frontGroup.classList.toggle('shirt-hidden');
    backGroup.classList.toggle('shirt-hidden');
  });
});

这种方案完全自主可控，没有第三方库的依赖，适配性也强，你可以直接把自己的衬衫SVG元素替换到示例里的分组中，就能快速实现切换效果啦！

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