将 SVG 移动/滚动到不在视图中的设定位置

Question

几个月来我一直在尝试这样做，但我卡住了！

我试图做的是将视点移动到衬衫的"背面"，或者如果背面在视野中，则移动到衬衫的"正面"！

我一直在到处寻找，但我发现的那些只是为了让我很难按照我希望他们在我的网站上工作的方式工作。

http://www.petercollingridge.co.uk/interactive-svg-components/draggable-svg-element

https://github.com/anvaka/panzoom/blob/master/README.md#demo

任何建议或帮助将不胜感激！

.ShirtHide{display:none;}
.ShirtColor{fill:#FFFFFF;display:inline;}
.Stiching{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:2.024,2.024,2.024,2.024,2.024,2.024;}
.Lines{fill:none;stroke:#000000;stroke-width:8;stroke-miterlimit:10;}
.Option{fill:#901727;}
.measurementblue{fill:blue;}
.measurementgreen{fill:green;}
.button-back-front{fill:#ccc}
.st0{font-family:'ArialMT'}
.st1{font-size:148.618px}
.st2{fill:#ccc}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2834.6 2834.6">
<g id="t01s">
<g id="Body" class="ShirtColor">
<path id="front-arm-right" d="M2648.6 712.6l-184.8 432s-281.7-76.7-282-76.8c-10.4-5.1-237.6-122.5-86.4-627.1l553.2 271.9z"/>
<path id="front-arm-left" d="M651.4 1067.9l-.3.1-281.3 76.5L185 712.6l553.1-272c154.8 516.3-86.7 627.3-86.7 627.3z"/>
<path id="back-arm-right" d="M5484.3 712.6l-184.8 432-281.6-76.6s-.1-.1-.4-.2c-10.4-5.1-237.6-122.5-86.4-627.1l.6.1 552.6 271.8z"/>
<path id="back-arm-left" d="M3487.1 1067.9l-.3.1-281.3 76.5-184.8-432 552.8-272h.3c154.8 516.4-86.7 627.4-86.7 627.4z"/>
<path id="front-body" d="M2181.9 1067.7v1413.1H651.2V1068l.3-.1s241.5-111 86.7-627.4l390.6-56.7 63.3-28.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 390.7 56.8c-151.3 504.5 75.9 622 86.3 627z"/>
<path id="back-body" d="M5017.5 1067.7v1413.1H3486.8V1068l.3-.1s241.5-111 86.7-627.4l390.6-56.7 63.3-28.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 390.7 56.8c-151.2 504.5 75.9 622 86.3 627z"/>
</g>
<g id="Rib" class="ShirtHide Option">
<path d="M1635.8 427.5c-64.6 7.8-133.2 11.8-207.1 11.8-83.6 0-160.9-5.2-232.3-15-3.3-17.1-5.8-40.7-4.4-69.4 64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8.4 2.2 1.6 39.4-5 73.6z"/>
<path d="M1714.1 385.2c-3.7 339-592.6 340.3-595.2 0l9.8-1.4 63.3-28.9c-1.4 28.8 1.2 52.3 4.4 69.4 3.7 19.2 8.1 30.3 8.8 31.6 33 74.3 115.2 126.9 211.3 126.9 95 0 177.3-51 210.1-124.3 4.1-9.2 7.1-19.9 9.2-31 6.6-34.2 5.3-71.4 5-73.6l64 30 9.3 1.3z"/>
<path d="M4549.8 385.2c-2.9 147.3-592.3 146.7-595.2 0l9.8-1.4 63.3-28.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 9.3 1.3z"/>
</g>
<g id="Stiching" class="Stiching">
<path d="M651.2 2418.3h1530.7"/>
<path d="M2181.9 2430.6H651.2"/>
<path d="M2436.2 1137l183.1-438.9"/>
<path d="M2630.3 703.5l-182.6 436.7"/>
<path d="M401.5 1135.9L217.7 696.5"/>
<path d="M206.7 701.9l182.8 437.3"/>
<path d="M1633.8 437.1c-64.3 7.3-130.2 10.8-203 10.8-82.5 0-161-5.1-232.2-14.4"/>
<path d="M1629.1 452.6c-63.2 6.4-127.9 9.5-198.3 9.5-79.9 0-157.5-4.4-227.9-12.6"/>
<path d="M1706.9 384.1c-9.2 332.6-568 333.1-576.5 0"/>
<path d="M1723.2 386.5c-9.7 349.7-600.2 350.2-609.1 0"/>
<path d="M3486.8 2418.3h1530.7"/>
<path d="M5017.5 2430.6H3486.8"/>
<path d="M5271.4 1136.9l183.7-438.7"/>
<path d="M5465.9 703.5l-182.4 436.7"/>
<path d="M3236.7 1136l-183.6-439.4"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2834.6 2834.6">
<path d="M3041.2 702.5l184.1 436.6"/>
<path d="M4542.5 384.1c-10.4 136.3-568.7 134.3-578.2-.3"/>
</g>
<g id="Lines" class="Lines">
<path d="M1192 354.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8"/>
<path d="M2648.6 712.6l-184.8 432s-281.7-76.7-282-76.8c-10.4-5.1-237.6-122.5-86.3-627.1l553.1 271.9z"/>
<path d="M651.4 1067.9l-281.6 76.6-184.8-432 553.1-272c154.8 516.4-86.7 627.4-86.7 627.4z"/>
<path d="M1714.1 385.2c-2.6 340-592.6 340.6-595.3 0"/>
<path d="M1635.8 427.5c-64.6 7.8-133.2 11.8-207.1 11.8-83.6 0-160.9-5.2-232.3-15"/>
<path d="M1128.7 383.8l63.3-28.9c-3 61 12 98.5 13.2 101.1 33 74.3 115.2 126.9 211.3 126.9 95 0 177.3-51 210.1-124.3 16.7-37.4 14.7-101.8 14.2-104.7l64 30 390.7 56.8c-151.2 504.6 76 622.1 86.3 627.1v1413.1H651.2V1068l.3-.1s241.5-111 86.7-627.4l390.5-56.7z"/>
<path d="M1626.6 458.6c-62.5 5.9-128.9 9.1-197.9 9.1-78.5 0-153.8-4.1-223.6-11.7"/>
<path d="M5484.3 712.6l-184.8 432-281.6-76.6s-.1-.1-.4-.2c-10.4-5.1-237.6-122.5-86.4-627.1l.6.1 552.6 271.8z"/>
<path d="M3487.1 1067.9l-.3.1-281.3 76.5-184.8-432 552.8-272h.3c154.8 516.4-86.7 627.4-86.7 627.4z"/>
<path d="M4549.8 385.2c-2.9 147.3-592.3 146.6-595.2 0"/>
<path d="M4027.7 354.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 390.7 56.8c-151.2 504.6 76 622.1 86.4 627.1v1413.1H3486.8V1068l.3-.1s241.5-111 86.7-627.4l390.6-56.7 63.3-28.9z"/>
</g>
</g>
<text transform="translate(96.129 215.368)" class="st0 st1">Front</text>
<text transform="translate(2960.794 215.368)" class="st2 st0 st1">Front</text>
<text transform="translate(5230.34 215.368)" class="st0 st1">Back</text>
<text transform="translate(2381.686 215.368)" class="st2 st0 st1">Back</text>
<path class="st2" d="M2693 242.2l10.4-17.8h-303.8v-5h303.8l-10.4-17.9 49.8 20.4z"/>
<path class="st2" d="M3293.9 224.4h-343.8l10.4 17.8-49.7-20.3 49.7-20.4-10.4 17.9h343.8z"/>
</svg>

https://jsfiddle.net/zyexhz52/2/

Answer 1

我试图做一个最小的改变，并展示如何实现这一目标。请检查一下(按黑色文本在视图之间导航(

简而言之 - 您基本上可以操纵ViewBox来控制"节目中"的内容。在这种情况下，您需要更改"x"以在正面/背面之间切换。

我做了非常原始的onclick处理程序，您可能希望同时执行触摸和鼠标侦听器，以便移动用户也可以毫无问题地执行此操作。

我也没有修复您的文本作为按钮的行为方式，但我可能也会改变它;

// we cache some DOM items we need first:
var mainSVG = document.getElementById("mainSVG");
var mainViewBox = mainSVG.viewBox.baseVal;
function goToBack() {
  mainViewBox.x = 2850;
}
function goToFront() {
  mainViewBox.x = 0;
}

.ShirtHide {
  display: none;
}
.ShirtColor {
  fill: #FFFFFF;
  display: inline;
}
.Stiching {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke-dasharray: 2.024, 2.024, 2.024, 2.024, 2.024, 2.024;
}
.Lines {
  fill: none;
  stroke: #000000;
  stroke-width: 8;
  stroke-miterlimit: 10;
}
.Option {
  fill: #901727;
}
.measurementblue {
  fill: blue;
}
.measurementgreen {
  fill: green;
}
.button-back-front {
  fill: #ccc
}
.st0 {
  font-family: '
  ArialMT'
}
.st1 {
  font-size: 148.618px
}
.st2 {
  fill: #ccc
}

<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2834.6 2834.6">
<g id="t01s">
<g id="Body" class="ShirtColor">
<path id="front-arm-right" d="M2648.6 712.6l-184.8 432s-281.7-76.7-282-76.8c-10.4-5.1-237.6-122.5-86.4-627.1l553.2 271.9z"/>
<path id="front-arm-left" d="M651.4 1067.9l-.3.1-281.3 76.5L185 712.6l553.1-272c154.8 516.3-86.7 627.3-86.7 627.3z"/>
<path id="back-arm-right" d="M5484.3 712.6l-184.8 432-281.6-76.6s-.1-.1-.4-.2c-10.4-5.1-237.6-122.5-86.4-627.1l.6.1 552.6 271.8z"/>
<path id="back-arm-left" d="M3487.1 1067.9l-.3.1-281.3 76.5-184.8-432 552.8-272h.3c154.8 516.4-86.7 627.4-86.7 627.4z"/>
<path id="front-body" d="M2181.9 1067.7v1413.1H651.2V1068l.3-.1s241.5-111 86.7-627.4l390.6-56.7 63.3-28.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 390.7 56.8c-151.3 504.5 75.9 622 86.3 627z"/>
<path id="back-body" d="M5017.5 1067.7v1413.1H3486.8V1068l.3-.1s241.5-111 86.7-627.4l390.6-56.7 63.3-28.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 390.7 56.8c-151.2 504.5 75.9 622 86.3 627z"/>
</g>
<g id="Rib" class="ShirtHide Option">
<path d="M1635.8 427.5c-64.6 7.8-133.2 11.8-207.1 11.8-83.6 0-160.9-5.2-232.3-15-3.3-17.1-5.8-40.7-4.4-69.4 64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8.4 2.2 1.6 39.4-5 73.6z"/>
<path d="M1714.1 385.2c-3.7 339-592.6 340.3-595.2 0l9.8-1.4 63.3-28.9c-1.4 28.8 1.2 52.3 4.4 69.4 3.7 19.2 8.1 30.3 8.8 31.6 33 74.3 115.2 126.9 211.3 126.9 95 0 177.3-51 210.1-124.3 4.1-9.2 7.1-19.9 9.2-31 6.6-34.2 5.3-71.4 5-73.6l64 30 9.3 1.3z"/>
<path d="M4549.8 385.2c-2.9 147.3-592.3 146.7-595.2 0l9.8-1.4 63.3-28.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 9.3 1.3z"/>
</g>
<g id="Stiching" class="Stiching">
<path d="M651.2 2418.3h1530.7"/>
<path d="M2181.9 2430.6H651.2"/>
<path d="M2436.2 1137l183.1-438.9"/>
<path d="M2630.3 703.5l-182.6 436.7"/>
<path d="M401.5 1135.9L217.7 696.5"/>
<path d="M206.7 701.9l182.8 437.3"/>
<path d="M1633.8 437.1c-64.3 7.3-130.2 10.8-203 10.8-82.5 0-161-5.1-232.2-14.4"/>
<path d="M1629.1 452.6c-63.2 6.4-127.9 9.5-198.3 9.5-79.9 0-157.5-4.4-227.9-12.6"/>
<path d="M1706.9 384.1c-9.2 332.6-568 333.1-576.5 0"/>
<path d="M1723.2 386.5c-9.7 349.7-600.2 350.2-609.1 0"/>
<path d="M3486.8 2418.3h1530.7"/>
<path d="M5017.5 2430.6H3486.8"/>
<path d="M5271.4 1136.9l183.7-438.7"/>
<path d="M5465.9 703.5l-182.4 436.7"/>
<path d="M3236.7 1136l-183.6-439.4"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2834.6 2834.6">
<path d="M3041.2 702.5l184.1 436.6"/>
<path d="M4542.5 384.1c-10.4 136.3-568.7 134.3-578.2-.3"/>
</g>
<g id="Lines" class="Lines">
<path d="M1192 354.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8"/>
<path d="M2648.6 712.6l-184.8 432s-281.7-76.7-282-76.8c-10.4-5.1-237.6-122.5-86.3-627.1l553.1 271.9z"/>
<path d="M651.4 1067.9l-281.6 76.6-184.8-432 553.1-272c154.8 516.4-86.7 627.4-86.7 627.4z"/>
<path d="M1714.1 385.2c-2.6 340-592.6 340.6-595.3 0"/>
<path d="M1635.8 427.5c-64.6 7.8-133.2 11.8-207.1 11.8-83.6 0-160.9-5.2-232.3-15"/>
<path d="M1128.7 383.8l63.3-28.9c-3 61 12 98.5 13.2 101.1 33 74.3 115.2 126.9 211.3 126.9 95 0 177.3-51 210.1-124.3 16.7-37.4 14.7-101.8 14.2-104.7l64 30 390.7 56.8c-151.2 504.6 76 622.1 86.3 627.1v1413.1H651.2V1068l.3-.1s241.5-111 86.7-627.4l390.5-56.7z"/>
<path d="M1626.6 458.6c-62.5 5.9-128.9 9.1-197.9 9.1-78.5 0-153.8-4.1-223.6-11.7"/>
<path d="M5484.3 712.6l-184.8 432-281.6-76.6s-.1-.1-.4-.2c-10.4-5.1-237.6-122.5-86.4-627.1l.6.1 552.6 271.8z"/>
<path d="M3487.1 1067.9l-.3.1-281.3 76.5-184.8-432 552.8-272h.3c154.8 516.4-86.7 627.4-86.7 627.4z"/>
<path d="M4549.8 385.2c-2.9 147.3-592.3 146.6-595.2 0"/>
<path d="M4027.7 354.9c64.7 15.9 146.8 27.8 236.7 27.8 79.2 0 151.4-16.2 212.1-28.8l64 30 390.7 56.8c-151.2 504.6 76 622.1 86.4 627.1v1413.1H3486.8V1068l.3-.1s241.5-111 86.7-627.4l390.6-56.7 63.3-28.9z"/>
</g>
</g>
<text transform="translate(96.129 215.368)" class="st0 st1" onclick="goToBack()">Front</text>
<text transform="translate(2960.794 215.368)" class="st2 st0 st1">Front</text>
<text transform="translate(5230.34 215.368)" class="st0 st1" onclick="goToFront()">Back</text>
<text transform="translate(2381.686 215.368)" class="st2 st0 st1">Back</text>
<path class="st2" d="M2693 242.2l10.4-17.8h-303.8v-5h303.8l-10.4-17.9 49.8 20.4z"/>
<path class="st2" d="M3293.9 224.4h-343.8l10.4 17.8-49.7-20.3 49.7-20.4-10.4 17.9h343.8z"/>
</svg>