Im trying to make the below svg animation smooth. I would want to make the white gradient to move through the path indefinitely. Any suggestions would be very helpful.
<svg width="8" height="243" viewBox="0 0 8 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L3 240" stroke="url(#paint0_linear)" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="3" y1="3" x2="3" y2="240" gradientUnits="userSpaceOnUse">
<stop offset="0" stopColor="#E8FF00" stopOpacity="1">
<animate attributeName="stop-opacity" values="1;1;1;0;0;0.5;0.8;1;1;1;1;1" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="0.3" stopColor="#E8FF00" stopOpacity="0">
<animate attributeName="offset" values="0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5;0.4;0.3" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="0.4" stopColor="#E8FF00" stopOpacity="0">
<animate attributeName="offset" values="0.4;0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5;0.4" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="0.5" stopColor="#E8FF00" stopOpacity="0">
<animate attributeName="offset" values="0.5;0.4;0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5" dur="1s" repeatCount="indefinite" />
</stop>
<stop offset="1" stopColor="#E8FF00" stopOpacity="1">
<animate attributeName="stop-opacity" values="1;1;1;1;0.8;0.5;0;0;0;1;1;1" dur="1s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
</svg>
Consider solving a gradient animation using gradientTransform
Below is the code showing the position of the white bar in the static version
<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="5" rx="5" height="240" fill="url(#paint0_linear)" />
<defs>
<linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%"" >
<stop offset="0%" stop-color="grey" />
<stop offset="43%" stop-color="grey" />
<stop offset="50%" stop-color="white" />
<stop offset="57%" stop-color="grey" />
<stop offset="100%" stop-color="grey" />
</linearGradient>
</defs>
</svg>
Add an animation command to move the entire gradient from top to bottom
<animateTransform attributeName="gradientTransform" ... />
<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="5" rx="5" height="240" fill="url(#paint0_linear)" />
<defs>
<linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
<stop offset="0%" stop-color="grey" />
<stop offset="43%" stop-color="grey" />
<stop offset="50%" stop-color="white" />
<stop offset="57%" stop-color="grey" />
<stop offset="100%" stop-color="grey" />
<animateTransform attributeName="gradientTransform"
type="translate"
from="0 -1"
to="0 1"
begin="0s"
dur="1.5s"
repeatCount="indefinite"/>
</linearGradient>
</defs>
</svg>
Update
#tejash jl comments:
animationTransform is not working on line path
I changed your path a little
<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L3 240 L6 240 L6 3z" fill="url(#paint0_linear)" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
<stop offset="0%" stop-color="grey" />
<stop offset="43%" stop-color="grey" />
<stop offset="50%" stop-color="white" />
<stop offset="57%" stop-color="grey" />
<stop offset="100%" stop-color="grey" />
<animateTransform attributeName="gradientTransform"
type="translate"
from="0 -1"
to="0 1"
begin="0s"
dur="1.5s"
repeatCount="indefinite"/>
</linearGradient>
</defs>
</svg>
The path must be closed for the gradient animation to work. But you can also select a polyline and apply a gradient to the line
<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
<polyline points="3,3 3,240" stroke="url(#paint0_linear)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear" x1="3" y1="3" x2="3" y2="240" gradientUnits="userSpaceOnUse" >
<stop offset="0" stop-color="grey" />
<stop offset=".43" stop-color="grey" />
<stop offset=".50" stop-color="white" />
<stop offset=".57" stop-color="grey" />
<stop offset="1" stop-color="grey" />
<animateTransform attributeName="gradientTransform"
type="translate"
from="0 -240"
to="0 240"
begin="0s"
dur="1.5s"
repeatCount="indefinite"/>
</linearGradient>
</defs>
</svg>
I have this gradient that uses userSpaceOnUse.
<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="800" y2="400" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="50%" style="stop-color:black;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>
I want to rewrite it to use objectBoundingBox but be rendered the same. How can I do this?
I imagine the rewritten SVG would be close to:
<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="50%" style="stop-color:black;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>
This answer (https://stackoverflow.com/a/50624704/1283776) indicates that I need to use a transform, but I haven't been successful in found a solution.
<!-- https://stackoverflow.com/questions/22214999/svg-linear-gradient-independent-of-the-shape-coordinates -->
<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0.5" gradientUnits="objectBoundingBox" gradientTransform="scale(1, 2)">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="50%" style="stop-color:black;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>
In SVG, how to apply the gradient applied to a line to its marker-end ?
<?xml version='1.0' encoding='UTF-8' standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="820px"
height="500px"
viewBox="0 0 820 500"
version="1.1" >
<style>
.axis3 {
stroke-width: 40px;
marker-end:url(#arrow);
stroke: url('#gradient_3');
fill: url('#gradient_3');
height: 30px;
}
.axis4 {
stroke-width: 40px;
marker-end:url(#arrow);
stroke: url('#gradient_4');
fill: url('#gradient_4'); /* corrected */
height: 30px;
}
</style>
<defs>
<marker
id="arrow"
markerWidth="20"
markerHeight="40"
refX="0"
refY="20"
orient="auto"
markerUnits="userSpaceOnUse"
style="fill:inherit;">
<path style="stroke:none;fill:inherit;overflow:visible;" d="M0 0 L20 20 L0 40 Z" />
</marker>
<linearGradient id="gradient_3" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="yellow" />
<stop offset="20%" stop-color="red" />
</linearGradient>
<linearGradient id="gradient_4" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="blue" />
<stop offset="20%" stop-color="green" />
</linearGradient>
</defs>
<line class="axis3" x1="50" x2="400" y1="50" y2="50" />
<line class="axis4" x1="50" x2="400" y1="100" y2="100" />
</svg>
With the code above, marker is always black.
As there are several elements line with different gradients, gradient can not be applied directly on the path.
I tried to add style="fill:inherit" - with no success.
This is how I would do it:
Instead of fill:inherit; I'm setting two css variables for the svg element: style="--fill:url(#gradient_3); --stroke:url(#gradient_4)". Both the line and the marker are using those variables for the fill and the stroke.
Alternatively you may choose to use the gradients directly in the code <path style="overflow:visible;fill:url(#gradient_3);"...
To your code I've added a #gradient_3 since you are using it.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="820px"
height="500px"
viewBox="0 0 820 500"
version="1.1"
style="--fill:url(#gradient_3); --stroke:url(#gradient_4)">
<style>
.axis {
stroke-width: 40px;
marker-end:url(#arrow);
height: 30px;
stroke:var(--stroke);
}
</style>
<defs>
<marker
id="arrow"
markerWidth="20"
markerHeight="40"
refX="0"
refY="20"
orient="auto"
markerUnits="userSpaceOnUse">
<path style="overflow:visible;fill:var(--fill);" d="M0 0 L20 20 L0 40 Z" />
</marker>
<linearGradient id="gradient_3" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="green" />
<stop offset="20%" stop-color="blue" />
</linearGradient>
<linearGradient id="gradient_4" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="blue" />
<stop offset="20%" stop-color="green" />
</linearGradient>
</defs>
<line class="axis" x1="50" x2="400" y1="50" y2="50" />
</svg>
Answer to "Make marker-end same color as path?" mentions that there is no inheritance of colors from related path.
Situation has not evolve since this answer.
I try to build a reflection of my text with gradient. But the reflection (the second text) has an off set and by applying the rotation the letters are shifting.
body {
background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="140" viewBox="0 0 1000 140">
<text x="260" y="70" font-size="60" fill=" #888888" style="text-anchor: right">Multimediale Kunst</text>
<defs>
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#000000" />
<stop offset="10%" stop-color="#666666" />
</linearGradient>
</defs>
<text rotate="180" x="310" y="80" font-size="60" fill="url(#linearGradient)" style="text-anchor: right">Multimediale Kunst</text>
</svg>
This is happening because the rotate attribute rotates individual start points. So wider characters end up further away from narrow characters and vice-versa.
The rotate attribute is the wrong approach anyway. If you want to vertically flip the text, then you should use a transform that scales the object on the y axis by -1.
body {
background-color: black;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="140" viewBox="0 0 1000 140">
<text x="260" y="70" font-size="60" fill=" #888888" style="text-anchor: right">Multimediale Kunst</text>
<defs>
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="50%" stop-color="#000000" />
<stop offset="100%" stop-color="#666666" />
</linearGradient>
</defs>
<text x="260" y="-80" font-size="60" fill="url(#linearGradient)" style="text-anchor: right" transform="scale(1,-1)">Multimediale Kunst</text>
</svg>
Objective:
To move an svg image (elevator car) along a y-axis in the upwards or downwards position.
The image moves as I would like but the problem is that when it goes upwards, it disappears off the screen. I learned that altering the height of the viewBox:
viewBox="0 0 900.7 701.9" (701.9) in this instance would increase the box in where this svg would stay visible.
Although, it seems that this only lets me move it downwards more, not upwards.
I have a jsfiddle set up that gets right to the point. As much as I have read about the svg viewBox, I feel like I am not understanding something about it. Please take a look, thanks.
https://jsfiddle.net/adamb7x/ungetpax/22/
You're going off the top of the SVG canvas. If you start lower you'll have more room to go up.
I've wrapped the drawing in an extra <g> tag that translates stuff down as Snap doesn't seem to have additive animation support.
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>