目的： 沿y轴向上或向下移动svg图像（电梯轿厢）。
图像按照我的意愿移动，但问题是当它向上移动时，它会从屏幕上消失。我了解到改变viewBox的高度：
在这种情况下，viewBox="0 0 900.7 701.9"（701.9）会增加此svg保持可见的位置。
虽然，似乎这只能让我向下移动更多，而不是向上移动。
我有一个jsfiddle设置正确到位。尽管我已经阅读过有关svg viewBox的内容，但我觉得我并不了解它。请看一下，谢谢。
答案 0 :(得分：1)
您将离开SVG画布的顶部。如果你开始降低，你将有更多的空间上升。
我已将图纸包裹在一个额外的<g>标签中，该标签可翻译内容，因为Snap似乎没有添加动画支持。
var rearCab = Snap('#RearCab');
var rCab = rearCab.select('#RCab');
document.getElementById("up").addEventListener("click",function(){
rCab.animate({
transform: 't0,-350'
}, 1000);
})
document.getElementById("down").addEventListener("click",function(){
rCab.animate({
transform: 't0,350'
}, 1000);
})div.rearCab{
top: 30%;
left: 30%;
position: absolute;
width: 250px;
height: 250px;
}
.st0 {
clip-path: url(#SVGID_2_);
fill: url(#SVGID_3_);
}
.st1 {
fill: #1C1C1C;
}
.st2 {
clip-path: url(#SVGID_5_);
fill: url(#SVGID_6_);
}
.st3 {
fill: url(#SVGID_7_);
}
.st4 {
fill: url(#SVGID_8_);
}
.st5 {
fill: url(#SVGID_9_);
}
.st6 {
fill: url(#SVGID_10_);
}
.st7 {
fill: url(#SVGID_11_);
}
.st8 {
fill: url(#SVGID_12_);
}
.st9 {
fill: url(#SVGID_13_);
}
.st10 {
display: none;
}
.st11 {
display: inline;
}
.st12 {
clip-path: url(#SVGID_15_);
fill: url(#SVGID_16_);
}
.st13 {
display: inline;
fill: #1C1C1C;
}
.st14 {
clip-path: url(#SVGID_18_);
fill: url(#SVGID_19_);
}
.st15 {
fill: url(#SVGID_20_);
}
.st16 {
fill: url(#SVGID_21_);
}
.st17 {
fill: url(#SVGID_22_);
}
.st18 {
fill: url(#SVGID_23_);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<div class="rearCab">
<svg version="1.1" id="RearCab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 900.7 901.9" style="enable-background:new 0 0 100.7 151.9;" xml:space="preserve">
<g transform="translate(0, 350)">
<g id="RCab">
<g id="RightDoorRear_1_">
<g id="RightDoorRear">
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<defs>
<rect id="SVGID_1_" x="50.1" y="25.6" width="28.4" height="116.5" />
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;" />
</clipPath>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-1799.5736" y1="-924.9411" x2="-1741.5736" y2="-924.9411" gradientTransform="matrix(-1 0 0 1 -1721.0736 1008.1411)">
<stop offset="2.688172e-02" style="stop-color:#5A5B5D" />
<stop offset="0.2742" style="stop-color:#CACCCE" />
<stop offset="0.439" style="stop-color:#C8CACC" />
<stop offset="0.5121" style="stop-color:#C1C3C5" />
<stop offset="0.5215" style="stop-color:#C0C1C3" />
<stop offset="0.6609" style="stop-color:#C2C3C5" />
<stop offset="0.7111" style="stop-color:#C8CACC" />
<stop offset="0.7204" style="stop-color:#CACCCE" />
<stop offset="0.7608" style="stop-color:#C1C2C4" />
<stop offset="0.8282" style="stop-color:#A7A9AB" />
<stop offset="0.9138" style="stop-color:#7E7F81" />
<stop offset="0.9785" style="stop-color:#5A5B5D" />
</linearGradient>
<polygon class="st0" points="20.5,24.3 78.5,24.3 78.5,142.1 20.5,142.1 " />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<rect x="49.8" y="25.6" class="st1" width="0.3" height="116.5" />
</g>
<g id="LeftDoorRear">
<g id="LeftDoor">
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<defs>
<rect id="SVGID_4_" x="21.5" y="25.6" width="28.8" height="116.5" />
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_4_" style="overflow:visible;" />
</clipPath>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="21.5" y1="106.7" x2="80.4" y2="106.7" gradientTransform="matrix(1 0 0 -1 0 191.2)">
<stop offset="2.688172e-02" style="stop-color:#5A5B5D" />
<stop offset="0.2742" style="stop-color:#CACCCE" />
<stop offset="0.439" style="stop-color:#C8CACC" />
<stop offset="0.5121" style="stop-color:#C1C3C5" />
<stop offset="0.5215" style="stop-color:#C0C1C3" />
<stop offset="0.6609" style="stop-color:#C2C3C5" />
<stop offset="0.7111" style="stop-color:#C8CACC" />
<stop offset="0.7204" style="stop-color:#CACCCE" />
<stop offset="0.7608" style="stop-color:#C1C2C4" />
<stop offset="0.8282" style="stop-color:#A7A9AB" />
<stop offset="0.9138" style="stop-color:#7E7F81" />
<stop offset="0.9785" style="stop-color:#5A5B5D" />
</linearGradient>
<rect x="21.5" y="25.6" class="st2" width="58.9" height="117.8" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<rect x="49.8" y="25.6" class="st1" width="0.3" height="116.5" />
</g>
<g id="CeilingandFloor">
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-5430.1064" y1="244.7255" x2="-5430.1064" y2="178.3705" gradientTransform="matrix(-0.8862 0 0 -1 -4729.9604 231.2)">
<stop offset="0" style="stop-color:#E5E2DF" />
<stop offset="0" style="stop-color:#D9D4D0" />
<stop offset="0" style="stop-color:#CCC6C1" />
<stop offset="6.668396e-02" style="stop-color:#BDB8B4" />
<stop offset="0.1461" style="stop-color:#A6A29F" />
<stop offset="0.8764" style="stop-color:#A6A29F" />
<stop offset="1" style="stop-color:#D0D2D3" />
<stop offset="1" style="stop-color:#A6A8AB" />
</linearGradient>
<polygon class="st3" points="85.9,14.7 78.5,25.2 78.5,151.9 85.9,151.9 " />
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="18.15" y1="245.4305" x2="18.15" y2="178.7922" gradientTransform="matrix(1 0 0 -1 0 231.2)">
<stop offset="0" style="stop-color:#E5E2DF" />
<stop offset="0" style="stop-color:#D9D4D0" />
<stop offset="0" style="stop-color:#CCC6C1" />
<stop offset="6.668396e-02" style="stop-color:#BDB8B4" />
<stop offset="0.1461" style="stop-color:#A6A29F" />
<stop offset="0.8764" style="stop-color:#A6A29F" />
<stop offset="1" style="stop-color:#D0D2D3" />
<stop offset="1" style="stop-color:#A6A8AB" />
</linearGradient>
<polygon class="st4" points="14.8,14.1 21.5,24.7 21.5,151.9 14.8,151.9 " />
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-4755.9702" y1="-2614.2454" x2="-4755.9702" y2="-2628.8735" gradientTransform="matrix(-1 0 0 1 -4705.5703 2768.1921)">
<stop offset="0.2903" style="stop-color:#555658" />
<stop offset="1" style="stop-color:#231F20" />
</linearGradient>
<polyline class="st5" points="14.9,151.9 21.5,142.1 78.5,142.1 85.9,151.9 14.9,151.9 " />
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="-4094.2314" y1="1633.9298" x2="-4094.2314" y2="1571.3958" gradientTransform="matrix(0 1 1 0 -1547.031 4095.8813)">
<stop offset="0.1828" style="stop-color:#96999B" />
<stop offset="0.5608" style="stop-color:#A1A3A6" />
<stop offset="0.957" style="stop-color:#A6A8AB" />
</linearGradient>
<polygon class="st6" points="3.5,3.3 3.5,0 97.5,0 97.5,3.3 " />
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="50.4" y1="219.3384" x2="50.4" y2="213.8274" gradientTransform="matrix(1 0 0 -1 0 231.2)">
<stop offset="0.457" style="stop-color:#48484A" />
<stop offset="0.8495" style="stop-color:#898B8D" />
<stop offset="0.9677" style="stop-color:#48484A" />
</linearGradient>
<polygon class="st7" points="21.5,25.6 14.9,19.9 14.9,14.2 85.9,14.2 85.9,19.3 78.5,25.6 " />
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="50.5" y1="232.7484" x2="50.5" y2="214.6539" gradientTransform="matrix(1 0 0 -1 0 231.2)">
<stop offset="1.612903e-02" style="stop-color:#E6E7E8" />
<stop offset="0.4194" style="stop-color:#B9BBBD" />
<stop offset="1" style="stop-color:#4A4A4C" />
</linearGradient>
<polygon class="st8" points="3.5,3.3 14.9,14.7 86.1,14.7 97.5,3.4 " />
<g>
<image style="overflow:visible;opacity:0.75;enable-background:new ;" width="42" height="35" transform="matrix(1 0 0 1 29 3.9)">
</image>
<g>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="44.0384" y1="210.2" x2="55.9487" y2="210.2" gradientTransform="matrix(1 0 0 -1 0 231.2)">
<stop offset="0" style="stop-color:#E5E2DF" />
<stop offset="0" style="stop-color:#D9D4D0" />
<stop offset="0" style="stop-color:#CCC6C1" />
<stop offset="6.668396e-02" style="stop-color:#BDB8B4" />
<stop offset="0.1461" style="stop-color:#A6A29F" />
<stop offset="0.5" style="stop-color:#FFFFFF" />
<stop offset="0.5796" style="stop-color:#F1F1F0" />
<stop offset="0.7315" style="stop-color:#CDCBC9" />
<stop offset="0.8764" style="stop-color:#A6A29F" />
<stop offset="1" style="stop-color:#D0D2D3" />
<stop offset="1" style="stop-color:#A6A8AB" />
</linearGradient>
<ellipse class="st9" cx="50" cy="21" rx="6" ry="2" />
</g>
</g>
</g>
<g id="LeftDoor_2_" class="st10">
<g id="RightDoor_2_" class="st11">
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<defs>
<rect id="SVGID_14_" x="14.8" y="14.7" width="35.5" height="137.2" />
</defs>
<clipPath id="SVGID_15_">
<use xlink:href="#SVGID_14_" style="overflow:visible;" />
</clipPath>
<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="-1020.2736" y1="-925.5911" x2="-947.7736" y2="-925.5911" gradientTransform="matrix(1 0 0 1 1035.0736 1008.1411)">
<stop offset="2.688172e-02" style="stop-color:#5A5B5D" />
<stop offset="0.2742" style="stop-color:#CACCCE" />
<stop offset="0.439" style="stop-color:#C8CACC" />
<stop offset="0.5121" style="stop-color:#C1C3C5" />
<stop offset="0.5215" style="stop-color:#C0C1C3" />
<stop offset="0.6609" style="stop-color:#C2C3C5" />
<stop offset="0.7111" style="stop-color:#C8CACC" />
<stop offset="0.7204" style="stop-color:#CACCCE" />
<stop offset="0.7608" style="stop-color:#C1C2C4" />
<stop offset="0.8282" style="stop-color:#A7A9AB" />
<stop offset="0.9138" style="stop-color:#7E7F81" />
<stop offset="0.9785" style="stop-color:#5A5B5D" />
</linearGradient>
<polygon class="st12" points="87.3,151.9 14.8,151.9 14.8,13.2 87.3,13.2 " />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<rect x="50.2" y="14.7" class="st13" width="0.3" height="137.2" />
</g>
<g id="RightDoor" class="st10">
<g id="RightDoor_1_" class="st11">
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<defs>
<rect id="SVGID_17_" x="50.3" y="14.7" width="35.6" height="137.2" />
</defs>
<clipPath id="SVGID_18_">
<use xlink:href="#SVGID_17_" style="overflow:visible;" />
</clipPath>
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-1806.9736" y1="-925.5911" x2="-1734.4736" y2="-925.5911" gradientTransform="matrix(-1 0 0 1 -1721.0736 1008.1411)">
<stop offset="2.688172e-02" style="stop-color:#5A5B5D" />
<stop offset="0.2742" style="stop-color:#CACCCE" />
<stop offset="0.439" style="stop-color:#C8CACC" />
<stop offset="0.5121" style="stop-color:#C1C3C5" />
<stop offset="0.5215" style="stop-color:#C0C1C3" />
<stop offset="0.6609" style="stop-color:#C2C3C5" />
<stop offset="0.7111" style="stop-color:#C8CACC" />
<stop offset="0.7204" style="stop-color:#CACCCE" />
<stop offset="0.7608" style="stop-color:#C1C2C4" />
<stop offset="0.8282" style="stop-color:#A7A9AB" />
<stop offset="0.9138" style="stop-color:#7E7F81" />
<stop offset="0.9785" style="stop-color:#5A5B5D" />
</linearGradient>
<polygon class="st14" points="13.4,13.2 85.9,13.2 85.9,151.9 13.4,151.9 " />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<rect x="50.2" y="14.7" class="st13" width="0.3" height="137.2" />
</g>
<g id="LeftBar">
<linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="9.2" y1="258.4245" x2="9.2" y2="186.5748" gradientTransform="matrix(1 0 0 -1 0 231.2)">
<stop offset="0.7527" style="stop-color:#616264" />
<stop offset="1" style="stop-color:#898B8D" />
</linearGradient>
<polygon class="st15" points="3.5,3.3 14.9,14.7 14.9,151.9 3.5,151.9 " />
<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="1.9" y1="214.1236" x2="1.9" y2="112.9763" gradientTransform="matrix(1 0 0 -1 0 231.2)">
<stop offset="0.1828" style="stop-color:#87898B" />
<stop offset="0.5404" style="stop-color:#7D7F81" />
<stop offset="0.957" style="stop-color:#797B7D" />
</linearGradient>
<rect x="0.2" class="st16" width="3.4" height="151.9" />
</g>
<g id="RightBar">
<linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="-5440.8267" y1="258.4242" x2="-5440.8267" y2="186.5752" gradientTransform="matrix(-0.8862 0 0 -1 -4729.9604 231.2)">
<stop offset="0.7527" style="stop-color:#616264" />
<stop offset="1" style="stop-color:#898B8D" />
</linearGradient>
<polygon class="st17" points="97.5,3.3 85.9,14.7 85.9,151.9 97.5,151.9 " />
<linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="99.2" y1="214.1236" x2="99.2" y2="112.9763" gradientTransform="matrix(1 0 0 -1 0 231.2)">
<stop offset="0.2043" style="stop-color:#77787B" />
<stop offset="0.5796" style="stop-color:#6B6C6F" />
<stop offset="0.957" style="stop-color:#67686B" />
</linearGradient>
<rect x="97.5" class="st18" width="3.4" height="151.9" />
</g>
</g>
</g>
</svg>
</div>
<button id="up">Up</button>
<button id="down">Down</button>
</button>