Преобразование svg перемещает изображение за пределы экрана при подъеме вверх

Цель: переместить SVG-изображение (кабина лифта) по оси Y вверх или вниз.

Изображение перемещается так, как хотелось бы, но проблема в том, что когда оно движется вверх, оно исчезает за пределами экрана. Я узнал, что изменение высоты viewBox: viewBox="0 0 900.7 701.9" (701,9) в этом случае увеличит поле, в котором этот svg останется видимым.

Хотя, похоже, это позволяет мне сдвинуть его только вниз, а не вверх.

У меня есть настройка jsfiddle, которая подходит к делу. Сколько бы я ни читал о svg viewBox, мне кажется, что я чего-то в нем не понимаю. Пожалуйста, посмотрите, спасибо.

https://jsfiddle.net/adamb7x/ungetpax/22/


svg snap.svg
person KS7X    schedule 18.11.2016    source источник
comment
Вы запускаете объект в верхней части холста SVG, и когда вы перемещаете его вверх, он оказывается за пределами этой области. Если бы вы начали его ниже, у вас было бы место, чтобы подняться.   -  person Robert Longson    schedule 18.11.2016
comment
@RobertLongson Похоже, я должен установить его посередине холста, чтобы дать ему достаточно места для перемещения вверх и вниз. Где я могу изменить положение объекта относительно холста?   -  person KS7X    schedule 18.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вы выходите за пределы холста 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>

person Robert Longson    schedule 18.11.2016
comment
Похоже, это работает! Кажется, что по умолчанию SVG будет размещен поверх холста. Увеличение высоты viewBox только увеличивает его вниз. Спасибо за понимание! - person KS7X; 18.11.2016
comment
Ну да, (0,0) — это исходная точка, и это вверху слева. - person Robert Longson; 18.11.2016