Блин с PNG все работает.
А с SVG нет.
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<g>
<rect x="7.037" y="180.967" transform="matrix(-0.6247 -0.7809 0.7809 -0.6247 -90.856 335.9316)" style="fill:#C7CFE2;" width="56.531" height="17.667"/>
<path style="fill:#C7CFE2;" d="M206.531,213.423c-5.807-0.736-8.945-7.196-5.933-12.214l6.855-11.425
c4.77-7.95,13.248-13.214,22.52-13.233c0.052,0,0.104,0,0.156,0h43.525c8.342,0,16.196,3.927,21.201,10.601l31.044,41.398
L206.531,213.423z"/>
<path style="fill:#C7CFE2;" d="M324.046,170.667c-0.749-0.611-1.577-1.227-2.483-1.839h-39.06l61.773,69.517l35.31-17.655
C379.585,220.689,338.339,182.327,324.046,170.667z"/>
</g>
<path class="body" id="move" onclick="moveRight('moveRight')" style="fill:#FF6464;" d="M414.896,211.862h-36.119c-5.23,0-10.343,1.548-14.695,4.449l-12.498,8.333
c-1.49,0.993-3.087,1.767-4.728,2.434l-32.807-43.753c-2.093-2.792-0.102-6.774,3.388-6.774h13.542
c-2.669-2.321-5.046-4.345-6.934-5.885c-6.988-5.702-20.23-11.77-50.368-11.77h-43.549c-19.198,0-38.131,4.47-55.301,13.056
l-62.158,31.082H35.31c-14.626,0-26.483,11.857-26.483,26.483v79.448l61.793,17.655h432.551v-26.483
C503.171,251.385,463.649,211.862,414.896,211.862z M206.531,213.423c-5.807-0.736-8.945-7.196-5.933-12.214l6.855-11.425
c4.77-7.95,13.248-13.214,22.52-13.233c0.052,0,0.104,0,0.156,0h43.525c8.342,0,16.196,3.927,21.201,10.601l31.044,41.398
L206.531,213.423z"/>
<path style="fill:#D2555A;" d="M503.171,335.448H105.931c-4.879,0-8.828-3.948-8.828-8.828s3.948-8.828,8.828-8.828h397.241
c4.879,0,8.828,3.948,8.828,8.828S508.051,335.448,503.171,335.448z"/>
<circle style="fill:#D7DEED;" cx="414.895" cy="300.137" r="44.138"/>
<path onmousedown="changeBGr()" onmouseover="changeBGR()" id="wheel-r" class="wheels" style="fill:#464655;" d="M414.896,353.103c-29.207,0-52.965-23.758-52.965-52.965c0-29.207,23.758-52.965,52.965-52.965
c29.207,0,52.965,23.758,52.965,52.965C467.861,329.344,444.103,353.103,414.896,353.103z M414.896,264.827
c-19.474,0-35.31,15.837-35.31,35.31s15.837,35.31,35.31,35.31c19.474,0,35.31-15.837,35.31-35.31
C450.206,280.664,434.369,264.827,414.896,264.827z"/>
<circle style="fill:#B8BFD4;" cx="414.895" cy="300.137" r="17.655"/>
<g>
<path style="fill:#D2555A;" d="M79.457,335.448c-0.707,0-1.431-0.086-2.146-0.267L6.69,317.525
c-4.733-1.181-7.612-5.974-6.422-10.698c1.173-4.741,5.974-7.638,10.698-6.422l70.621,17.655c4.733,1.181,7.612,5.974,6.422,10.698
C87.008,332.776,83.414,335.448,79.457,335.448z"/>
<path style="fill:#D2555A;" d="M8.828,255.999l12.484,12.484c3.311,3.311,5.171,7.801,5.171,12.484v36.824l-17.655-8.828
C8.828,308.965,8.828,255.999,8.828,255.999z"/>
<path style="fill:#D2555A;" d="M294.335,300.137H141.241c-4.879,0-8.828-3.948-8.828-8.828s3.948-8.828,8.828-8.828h153.094
c7.077,0,13.732-2.759,18.733-7.758l13.379-13.379c3.448-3.448,9.035-3.448,12.483,0s3.448,9.035,0,12.483l-13.379,13.379
C317.214,295.543,306.129,300.137,294.335,300.137z"/>
</g>
<circle style="fill:#D7DEED;" cx="97.102" cy="300.137" r="44.138"/>
<path onmousedown="changeBGl()" onmouseover="changeBGL()" id="wheel-l" class="wheels" style="fill:#464655;" d="M97.103,353.103c-29.207,0-52.965-23.758-52.965-52.965c0-29.207,23.758-52.965,52.965-52.965
s52.965,23.758,52.965,52.965C150.069,329.344,126.31,353.103,97.103,353.103z M97.103,264.827c-19.474,0-35.31,15.837-35.31,35.31
s15.837,35.31,35.31,35.31s35.31-15.837,35.31-35.31C132.414,280.664,116.577,264.827,97.103,264.827z"/>
<circle style="fill:#B8BFD4;" cx="97.102" cy="300.137" r="17.655"/>
<path style="fill:#FF8B8B;" d="M15.177,212.497l338.882,33.888c4.73,0.473,9.526-0.266,13.825-2.295
c20.589-9.719,89.972-34.51,134.713,46.234c-4.888-44.13-42.269-78.463-87.701-78.463h-36.121c-5.229,0-10.342,1.548-14.694,4.449
l-12.498,8.333c-1.49,0.993-3.087,1.767-4.728,2.434c0,0-3.193,3.816-20.957,1.472l-70.734-8.964
c-59.114-7.385-134.324-16.552-142.495-16.552H35.31C27.201,203.034,20.034,206.757,15.177,212.497z"/>
<path style="fill:#FF6464;" id="spoiler" d="M44.138,185.379H21.553c-7.599,0-14.346-4.863-16.749-12.072l-2.631-7.893
c-1.069-3.207,1.318-6.518,4.697-6.518h37.268c4.875,0,8.828,3.953,8.828,8.828v8.828C52.965,181.428,49.013,185.379,44.138,185.379
z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
function changeBGl() {
let wheels = document.querySelector("#wheel-l");
wheels.style.fill = "#2196f3";
}
function changeBGr() {
let wheels = document.querySelector("#wheel-r");
wheels.style.fill = "#2196f3";
}
function changeBGL() {
let wheels = document.querySelector("#wheel-l");
wheels.style.fill = "#39dc6b";
}
function changeBGR() {
let wheels = document.querySelector("#wheel-r");
wheels.style.fill = "#39dc6b";
}
let car = document.querySelector('.body');
car.style.left = '100px';
function moveRight(event) {
let left = car.style.left;
if (left != '') left = parseInt(left);
else left = 100;
left += event.type == 'click' ? 150 : -150;
car.style.left = left + 'px';
}
car.addEventListener("click", moveRight, false);
рони,
