JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 500px; text-align: center;">
	<input id="move-left-btn" type="button" value="&lt;&lt;">
	<input id="move-right-btn" type="button" value="&gt;&gt;">
</div>

<div class="svgwrapper" style="width: 500px; height: 250px; background-color: lightgrey;">
	<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="250">
		<g id="svggroup" class="transition-on" transform="matrix(0.2,0,0,0.2,80,35)">
			<image width="1672" height="887" opacity="1" xlink:href="https://dl.dropboxusercontent.com/sh/q7htlj5h8qqfhjf/SVDuynM7R3/car.png"></image>
		</g>
	</svg>
</div>

JavaScript

$(document).ready(function() {
	var curXPos = 80;

    // Local test function which represent some server calls in my "real life" scenario
    // Just updates the x-position in the transform matrix in this test case
	function updateSvgText(svgText, posXDelta) {
		curXPos += posXDelta;
		if (curXPos < 0) {
			curXPos = 160;
		} else if (curXPos > 160) {
			curXPos = 0;
		}

		return svgText.replace(/matrix\(.*\)/, 'matrix(0.2,0,0,0.2,' + curXPos + ',35)');
	}

    // Fetch the new SVG (in real life from server) and rerender it
	function moveSvg(posXDelta) {
		var svg = $('#svg'),
			svgText = updateSvgText($('.svgwrapper').html(), posXDelta);

		svg.empty();
		svg.append($(svgText).children());
	}

	$('#move-left-btn').click($.proxy(moveSvg, this, -20));
	$('#move-right-btn').click($.proxy(moveSvg, this, 20));
});