I am loading an svg file and then drawing it on a canvas. This is part of my code:
svgDocument = xhr.responseXML;
map = new Image();
map.src = "data:image/svg+xml," + (new XMLSerializer()).serializeToString(svgDocument);
However for some reason only some svg files work with this.
For example this svg works:
<?xml version="1.0" standalone="no"?>
<svg width="400" height="400" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="1" y="1" width="398" height="398"
fill="none" stroke="blue" />
<path id = "Triangle" d="M 100 100 L 300 100 L 400 200 L 200 300 z"
fill="red" stroke="blue" stroke-width="1" />
</svg>
While this svg does not work:
<?xml version="1.0" encoding="utf-8"?>
<!-- (c) ammap.com | SVG map of Australia - Low -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<style type="text/css">
.land
{
fill: #CCCCCC;
fill-opacity: 1;
stroke:white;
stroke-opacity: 1;
stroke-width:0.5;
}
</style>
<amcharts:ammap projection="mercator" leftLongitude="112.902891" topLatitude="-10.132839" rightLongitude="158.966830" bottomLatitude="-54.757221"></amcharts:ammap>
<!-- All areas are listed in the line below. You can use this list in your script. -->
<!--{id:"AU-NT"},{id:"AU-WA"},{id:"AU-ACT"},{id:"AU-NSW"},{id:"AU-SA"},{id:"AU-VIC"},{id:"AU-QLD"},{id:"AU-TAS"}-->
</defs>
<g>
<path id="AU-NT" title="Northern Territory" class="land" d="M195.29,27.56l0.63,-1.15l-1.5,-1.01l0.76,-1l1.53,0.05l-0.03,-2.3l5.08,1.63l4.76,-0.32l1.42,0.45l1.75,-1.2l1.49,0.03l0.61,1.16l-0.37,0.8l0.66,-0.86l0,-1.68l1.45,-0.52l1.85,0.36l-1.2,-0.63l-0.12,-0.51l0.08,-3.17l0.61,-0.96l-2.19,-2l-1.27,-0.43l-3.1,0.96l-1.26,-1.76l-1.14,-0.61l-1.02,0.09l1.12,-1.54l1.2,-0.55l1.15,1.13l0.82,1.94l0.76,-0.56l-0.96,-2.37l1.41,0.26l0.7,-0.37l1.77,1.48l1.83,2.68l0.59,0.13l1.61,-2.05l0.47,0.04l2.88,4.18L222,17.2l0.55,0.8l1.54,0.65l1.26,-0.15l1.46,-1.11l1.18,0.2l-0.75,1.3l1.12,0.64l1.17,-0.75l1.47,1.12l0.23,1.27l1.77,-0.26l1.59,0.32l2.77,-0.78l1.08,1.5l2.31,1.49l1.6,0.31l1.05,-2.02l2.8,-0.15l0.83,-0.67l-0.87,0.23l0.12,-1.1l1.74,-0.25l1.38,-1.1l-0.04,-0.77l0.4,0.01l0.37,0.43l-2.18,2.1l0.46,0.54l-1.29,1.62l0.72,0.99l1.61,-1.42l1.51,-0.44l-0.92,1.16l0.37,0.56l0.8,-0.37l0.19,0.33l-0.87,1.26l0.61,1.04l2.18,-0.18l0.58,-0.45l0.76,-1.93l-2.02,-0.8l2.97,-2.35l1.21,-0.22l-0.25,0.83l1.46,3.03l0.91,-0.31l-0.69,-0.71l0.88,-0.22l1.1,0.56l1.11,1.5l-2.53,2.05l-1.1,1.77l-0.25,1.34l-1.37,-0.51l0.55,3.05l-0.95,2.19l-0.1,-0.35l-0.88,0.3l-0.12,-2.14l-1.7,2.05l-1.12,-0.6l-1.84,1.03l-0.39,0.67l0.47,0.65l-0.77,1.05l-0.2,1.25l0.89,1.61l1.07,-0.68l-1.4,5.06l-2.99,3.28l-0.9,2.33l-1.8,0.92l1.13,2.63l7.99,4.81l1.17,2.34l2.7,1.29L259,63.9l2.87,0.12l3.68,2.39l4,1.39l1.32,2.1l1.54,1.31l0,0l0,109.55l0,0l-97.64,0.07l0,0L174.7,52.34l0,0l2.01,1.22l0.06,2.26l0.71,-0.88l-0.29,-2.96l2.52,1.02l2.33,3.05l0.6,-0.23l-1.15,-1.79l0.23,-2.05l1.67,0.29l1.55,-1.07l-1.94,0.61l-0.98,-0.63l-0.96,-1.54l1.27,-0.29l0.75,-0.74L181.86,49l-1.3,-0.24l-1.97,-1.52l0.13,-0.89l1.33,-2.13l2.61,-1.64l1.04,-5.31l0.77,-0.8l0.48,0.91l1.05,-0.19l2.42,-2.05l-1.61,-1.97l0.27,-2.46l0.45,-0.2l0.47,0.43l1.11,-0.58l0.29,-2.45l1.68,-0.75l1,1.14l0.96,-0.07l-0.92,-0.27l-0.31,-1.17l0.37,-1.59l-0.33,-0.25l2.07,0.27L195.29,27.56zM195.97,19.82l-5.05,-3.27l-1.4,-4.28l0.3,-0.99l1.96,2.05l1.43,0.45l2.11,-0.91l1.14,0.49l1.6,-1.01l0.78,1.55l-0.33,-1.21l0.85,-1.12l1.59,0.64l1.2,1.58l0.09,0.83l-2.77,2.91L195.97,19.82zM260.56,44.63l0.64,-0.31l-0.28,1.4l-0.57,0.22l-5.55,-0.91l0.55,-3.66l0.31,-0.53l1.81,-0.55l-0.31,-0.7l0.91,-0.76l0.47,0.03l-0.5,0.81l0.4,1.16l1.03,0.18l0.8,-1.13l0.4,0.63l-1.64,1.47l-0.64,2.51l1.76,0.49L260.56,44.63zM190.91,18.71l-1.8,-0.69l-2.51,0.64l-0.78,-0.39l0.52,-1.37l0.91,0.32l0.4,-0.39l-0.21,-2.01l0.89,-1.55l0.96,-0.2l1.6,4l1.58,0.93l-0.25,0.55L190.91,18.71zM256.16,14.5l2.94,-4.79l-0.53,2.04l-1.77,2.48L256.16,14.5zM213.74,13.27l-1.02,-3.23l0.83,-0.32l0.52,1.71L213.74,13.27zM262.14,63.06l-1.3,-1.47l0.82,-1.19l0.9,1.94L262.14,63.06zM252.88,41.08l-0.31,-1.01l-0.11,0.72l-0.62,-0.21l0.1,-0.93l0.95,-0.75l0.95,0.73L252.88,41.08zM252.68,17.08l0,-0.51l0.99,-0.79l0.82,-0.04l1.44,-1.12L254.74,16L252.68,17.08zM256.39,61l-0.06,-1.08l0.93,-0.28l-0.19,1.23L256.39,61z"/>
<path id="AU-WA" title="Western Australia" class="land" d="M14.47,180.78l0.2,-1.84l-2.43,-2.57l-2.47,-5.41l-1.15,-0.7l-0.98,-2.78l0.03,-1.61l-2.44,-3.85l-0.06,-2.35l1.61,-5.6l0.75,-1.5l1.54,-1.21l0.27,-1.01l-0.09,-2.91l0.63,-1.92l-0.12,-1.14l-1.64,-3.85l3.01,-7.33l1.05,-1.56l1.44,-0.5l0.14,0.28l-1.07,4.09l0.7,1.48l-0.34,2.16l0.47,0.48l2.37,-1l3.02,-7.02l3.17,-1.76l1.19,-0.09l4.33,-1.9l1.82,-2.15l2.03,-1.1l1.29,-1.94l2.55,-1.19l0.97,-1.12l2.46,-0.73l2.52,-1.81l1.83,0.79l2.07,-1.11l2.99,1.26l3.72,-0.63l1.79,-0.78l3.56,-2.99l0.61,0.29l6.15,-1.02l1.94,-2.81l1.09,-0.83l1.18,-0.11l4.27,1.28l2.21,-1.14l5.99,-1.07l7.49,-3.28l2.71,-2.26l2.3,-3.11l1.64,-3.53l1.5,-2.02l0.25,-1.78l1.51,-0.37l4.32,-3.6l0.26,-1.43l-1.18,-0.54L101,86.33l-0.12,-2.14l-0.64,-1.66l0.37,-3.56l2.22,-2.79l0.74,-0.47l1.38,-0.01l-0.55,-1.23l0.46,-0.62l2.02,-0.31l0.09,-1.82l1.45,-1.11l0.28,-0.99l0.77,-0.28l0.74,0.74l-0.77,0.23l-0.36,1.25l1.52,1.46l5.2,9.95l-0.13,-2.6l0.6,-1.82l-0.49,-1.5l0.2,-0.86l0.69,-0.02l2.17,2.39l0.65,0.02l-0.91,-0.81l-0.39,-1.56l1.03,-1.18l-1.36,-0.06l-1.72,-2.42l0.06,-1.23l-1.22,0.02l-0.83,-0.75l2.34,0.34l0.74,-1.12l-0.02,-1.01l-1.6,-0.58l0.12,-1.31l1.69,-0.37l0.87,0.68l-0.8,0.68l1.72,1.34l0.79,-1.5l1.91,0.45l0.98,1.34l1.12,0.06l0.56,-0.64l0.99,0.48l4.53,0.12l-3.02,-0.89l-2.33,0.02l-0.27,-1.21l0.59,-1.34l0.44,-0.1l0.52,0.79l0.81,-0.56l0.24,-2.2l1.22,-1.23l-1.2,-0.07l-0.88,1.5l-1.46,-0.81l-0.31,-2.2l0.93,-2.13l1.35,0.43l0.81,-0.42l0.08,-2.42l0.46,-0.11l5.17,2.99l-1.14,-1.01l0.23,-1.44l-2.01,0.38l0.28,-1.2l0.73,0l0.43,-0.74l-1.76,0.85l-0.62,-0.86l0.82,-0.67l0.87,0.12l1.06,-1.24l0.94,1.82l-0.03,-1.44l1.74,1.36l1.23,-0.26l-2.73,-2.06l0.65,-0.52l-1.16,-1.72l2.17,-2.5l2.74,0.29l-0.1,-2.68l0.42,-0.96l1.2,0.57l-0.94,3.98l0.87,-2.52l1.31,0.67l-0.2,1.2l0.84,0.79l1.46,-1.43l1.18,-4.29l-0.71,-1.82l-0.69,-0.44l2.17,0.39l-0.09,0.84l-0.56,0.24l0.37,1.22l1.04,0.72l0.5,-2.03l1.83,-0.95l-0.51,1.25l1.58,1.69l2.05,-2.87l-0.47,-1.96l1.22,-0.49l1.06,-0.25l0.67,0.54l1.2,2.17l0.28,-0.79l2.94,0.6l1.04,1.47l1.49,1l3.25,4.52l0.47,-0.23l1.84,1.58l0.2,1.09l-1.29,3.36l0.04,3.31l-0.57,1.14l0.83,-0.72l0.38,-2.46l1.36,1.03l0.32,1.06l0.05,-1.08l-1.08,-2.67l1.24,-1.7l0.51,1.47l1.03,0.03l-0.66,-2.76l1.61,-0.46l5.04,1.26l0,0l0.06,128.49l0,0L174.7,251l0,0l-8.88,4.31l-9.21,3l-7.03,0.63l-5.51,-0.99l-1.2,0.59l-1.05,-0.23l-4.96,3.58l-2.31,0.67l-6.03,3.84l-5.04,1.13l-1.91,1.98l-1.63,5.43l-2.02,1.76l-0.38,1.1l-2.11,1.64l-1.87,-0.14l-2.18,1.61l-0.73,-1.72l-0.9,-0.38l-1.88,0.64l-5.33,0.08l-1,0.69l-0.12,0.66l-1.44,0.15l-0.42,-0.14l-0.09,-1.62l-0.84,-0.89l-2.31,0.97l-3.47,-1.07l-6.5,0.51l-3.5,0.79l-1.34,0.74l-4.47,-0.59l-2.08,0.64l-2.14,1.59l-1.61,3.03l-1.54,1.51l-1.27,0.75l-3.22,-0.67l-1.87,1.27l0.16,0.75l-0.38,0.43l-2.63,1.1l-2.12,2.39l-2.17,1.16l-2.65,0.48l0.21,0.55l1.5,0.33l-0.67,0.38l-2.25,-1.02l-1.02,0.28l-0.25,0.91l-3.01,-1.58L43.87,294l-0.82,0.54l-4.48,-0.75l-2.64,-1.76l-2.64,-0.61l-1.73,-2.78l-3.46,-2.94l-2.76,-1.12l-1.29,0.85l-1.23,-1.31l-0.6,-7.43l0.47,-2.18l2.43,1.68l1.92,-0.41l3.43,-4.63l-1.28,-7.64l1.09,-1.9l-0.68,1.62l0.94,1.56l0.47,-2.54l-0.61,-10.92l-7.15,-15.29l-0.26,-2.89l-0.94,-2.67l0.44,-7.12l-0.98,-3.49l-0.57,-1.35l-2.34,-2.78l-0.38,-2.93l-0.88,-1.78l-3.78,-4.87l-0.65,-2.93l0.5,-1.76l-0.21,-1.27l-2,-4.92l-3.81,-6.15l-3.31,-3.52l-0.61,-1.93l0.69,-2.54l0.5,3.02l0.34,-1.92l1.61,1.99l0.35,2.7l1.05,1.77l1.53,-0.61l0.78,-1.16l0.06,-2.06l-3.37,-3.15l-0.63,-2.6l-1.1,-1.78l0.85,-2.03l2.47,3.05l0.4,1.13l-0.57,1.75l0.35,1.95l0.92,-0.34l0.87,-1.68l0.87,3.6l1.2,1.61l1.36,-1.07l0.29,-0.97l-0.54,-1.32l0.37,-2.33L14.47,180.78zM3.24,182.51l-2.75,-4.33L0,176.3l0.51,-1.67l0.54,0.13l-0.17,0.86l2.39,5.66L3.24,182.51zM126.09,58.75l-0.58,-1.35l0.98,-0.72l0.94,1.57L126.09,58.75zM26.72,120.51L26,120.37l0.01,-0.61l1.47,-1.72l0.23,1.22L26.72,120.51zM132.78,49.85l-0.57,-0.31l0.07,-0.85l0.76,-1.17l0.5,0.56L132.78,49.85z"/>
<path id="AU-ACT" title="Australian Capital Territory" class="land" d="M392.28,306.01L391.02,305.37L391.02,305.37L389.29,302.43L389.31,300.59L389.83,298.03L392.68,295.93L396.19,298.12L393.88,298.81L393.36,299.53L392.74,302.02L392.9,305.16L392.9,305.16z"/>
<path id="AU-NSW" title="New South Wales" class="land" d="M402.43,327.48l-19.25,-9.7l-0.98,-0.08l0.99,-2.48l-1.68,-2.93l-0.56,-4.42l-1.18,-0.75l-1.82,-0.78l-0.93,0.36l-1.53,-0.29l-1.01,0.17l-1.01,1.26l-2.8,0.73l-1.46,-0.1l-4.52,-1.69l-2.2,0.99l-5.35,-0.78l-3.1,-2.19l-1.77,0.7l-1.31,-0.39l-2.7,0.35l-0.58,1.62l0.17,1.36l-2.34,0.43l-1.34,-0.78l-2.28,-2.67l-0.56,-1.28l-2.81,-2.59l-3.52,-2.26l-1.89,-0.68l-0.35,-1.69l-1.69,-0.72l-0.5,-1.1l-0.16,-4.01l-2.31,-1.26l-2.89,-0.62l-0.82,-0.81l-0.81,0.48l-0.84,2.17l-0.92,-0.18l-0.93,-2.25l-0.94,-0.87l-0.05,-1.88l-1.51,-2.54l-2.12,-1.16l-1.7,0.35l-1.61,-0.42l-2.1,1.48l-3.19,-1.83l-1.87,-0.14l-0.84,-0.6l0,0l0.05,-63.7l0,0l86.31,0l5.57,-4.95l1.2,-0.33l1.4,0.69l6.37,-1.08l1.88,1.44l3.45,-0.29l2.74,1.25l2.77,2.39l0.13,1.88l0.68,1.09l1.06,-0.68l0.98,-2l1.87,-0.83l1.07,1.1l2.08,-1l0.35,-2.01l-0.98,-2.22l2.27,-1.44l2.16,-0.71l1.28,-1.38l1.19,0.8l1.78,0.39l3.82,-0.09l0.83,-1.1l2.64,-0.73l0.81,-0.66l0,0l0.78,0.71l0.15,0.81l-0.35,2.67l0.7,2.08l-0.2,2.48l-1.71,2.24l-1.2,3.52l0.3,0.87l-1.21,6.89l-2.55,7.71l-0.14,3.35l0.75,1.43l-2.46,8.95l-3.66,6.04l0.19,3.48l-4.37,3.57l0.19,1.13l-3.61,1.52l-2.58,4.88l-1.3,0.64l-0.11,0.59l0.46,0.41l-0.35,1.39l-1.24,1.66l-0.73,4.43l-1.88,0.58l1.04,0.56l-2.83,3.59l-1.02,2.97l0.44,0.54l-0.54,2.46l-0.92,1.21l1.14,1.9l-0.17,0.88l-0.29,0.25l-0.36,-0.39l-0.02,-0.88l-0.98,0.4l0.2,1.12l-1.77,1.32l-4.1,9.49l-0.29,5.19l-0.63,0.82l-1.9,7.2l0.05,1.97l1.08,1.25l0.14,0.94l-0.01,0.45l-0.77,0.24L402.43,327.48zM392.74,302.02l0.62,-2.48l0.52,-0.73l2.31,-0.68l-3.5,-2.19l-2.85,2.1l-0.52,2.56l-0.02,1.85l1.73,2.94l0,0l1.35,0.59l0.53,-0.8L392.74,302.02z"/>
<path id="AU-SA" title="South Australia" class="land" d="M254.01,283.28l-1.08,1.74l-0.88,0.39l-0.93,1.59l-1.12,0.7l-0.67,1.33l-0.77,2.33l0.75,0.06l1.45,-1.02l0.15,0.69l-0.17,2.59l-0.52,0.22l-1.84,-1.95l-0.68,0.1l-0.48,1.13l-0.39,-0.01l-3.44,-4.32l-1.2,-0.78l-1.12,0.39l1.04,-2.08l0.05,0.82l1.42,1.52l0.57,0.39l1.08,-0.35l-1.23,-0.85l-1.31,-7.14l-2.47,-3.1l-2.09,-1.7l0.19,-2.15l-1.63,-3.81l-1.24,-0.48l-2.87,0.81l-0.66,-0.74l-2.11,-5.47l0.87,0.06l0.58,1.05l0.96,-1.67l-0.22,-1.14l-1.76,-1.73l-2.84,1.13l0.33,-1.76l0.73,-0.08l-1.35,-1.88l-1.78,-1.26l0.12,-0.47l-0.74,-0.23l-1.31,1.43l-3.46,-0.24l-4.14,-2.99l-2.18,-0.26l-2.79,1.3l-1.43,-0.14l-4.63,-3.88l-6.74,-3.15l-3.85,1.73l-7,-0.39L174.7,251l0,0l0.06,-70.18l0,0l97.64,-0.07l0,0l32.57,0L305,217.3l0,0l-0.05,63.7l0,0l-0.28,-0.37l-0.04,54.4l0,0l-2.93,0.11l-1.83,-0.98l-1.89,-1.9l-2.55,-4.52l-1.38,-0.52l-2.63,-3.98l0.34,-0.7l-0.54,-1.81l0.2,-1.25l1.19,-1.71l-0.42,-3.24l-1.9,-4.63l-3,-4l-3.14,-3.08l3.49,2.76l2.78,4.4l-1.02,-2.95l-5.07,-5.1l-0.02,-1.18l0.67,-0.27l0.82,0.71l0.07,1.9l1.02,-0.11l0.23,-4.21l-1.56,-0.77l-0.84,0.83l-1.79,0.39l-0.11,0.89l0.83,0.46l-0.49,0.63l-2.93,-0.25l-2.01,1.52l-3.92,0.21l-0.89,-0.67l0.65,-1.15l1.44,-0.72l1.66,-1.79l0.28,-3.05l0.53,-1.16l-0.2,-3.9l-2.4,-3.27l-0.6,-2.16l-1.38,-2.35l-0.93,1.6l0.13,1.14l-1.03,1.06l-0.38,1.31l-0.15,2.44l-1.38,5.56l-0.8,0.65l-2.75,-0.81l-2.04,0.77l-0.72,0.93l-1.51,-0.23l-1.47,0.97l-0.66,-0.69l1.14,-1.38l0.95,-3.24l0.91,0.36l1.89,-0.3l1.12,0.72l0.54,-0.29l0.7,-3.69l-0.06,-4.88l-0.45,-1.65l1,-0.85l0.64,-2.76l3.75,-4.22l-1.46,-3.64l0.33,-0.98l2.19,-0.94l-0.08,-0.66l-0.93,-0.89l-1.5,-5.68l-0.58,-0.44l-0.09,2.09l0.5,0.58l0.07,1.37l-0.36,1.86l-1.95,0.48l-1.16,1.26l-3.02,6.97l-0.74,0.62l-1.32,0.05l-0.77,-0.47l-0.93,1.64l-4.89,3.05L254.01,283.28zM271.44,303.46l1.65,0.45l0.54,1.42l-0.79,0.71l-1.29,-0.63l-1.74,-0.13l-1.53,0.72l-0.06,1.2l-1.73,1.01l-1.06,-1.08l-1.43,-0.27l-0.82,0.8l-4.75,0.17l-1.89,-1.86l0.46,-1.97l5.85,-1.43l2.14,-0.95l2.27,0.19l0.64,0.61l0.14,1.28l2.1,0.75l0.64,0.05L271.44,303.46z"/>
<path id="AU-VIC" title="Victoria" class="land" d="M398.1,330.52l-2.92,0.82l-10.86,0.36l-5.97,2.2l-4.2,3.51l-5.42,5.71l-4.8,0.91l-2.3,-0.02l-0.38,0.57l1.21,2.21l1.25,-0.88l0.23,-0.84l0.39,0.18l0.16,3.76l-0.97,0.99l-0.81,-0.69l-0.79,-2.07l-1.14,-1.43l-0.84,-0.36l-0.68,0.6l-1.07,-0.09l-0.96,-2.84l-0.96,-0.15l-1.31,0.58l-2.08,-1.91l0.18,-1.29l1.34,-1.08l-1.21,-2.03l-2.05,0.15l-0.46,1.54l-1.98,2.04l-1.4,0.12l-1.52,-1.77l2.43,-0.51l1.59,-2.8l-0.35,-1.29l-1.97,-2.39l-4.24,3.19l-1.72,0.35l0.06,0.5l1.5,0.26l1.35,-0.65l0.75,0.21l0.05,1.01l-0.56,0.86l-3.21,0.54l-3.27,2.21l-2.38,2.93l-1.2,0.33l-2.05,1.93l-5.37,-3.08l-2.66,-0.85l-2.91,-2.25l-1.69,-0.67l-2.38,0.5l-2.12,-1.49l-2.32,-0.34l-1.42,0.75l0.33,1.08l-0.86,0.24l-1.27,-0.62l-2.83,-2.92l-2.44,-1.32l0,0l0.04,-54.4l0.28,0.37l0,0l0.84,0.6l1.87,0.14l3.19,1.83l2.1,-1.48l1.61,0.42l1.7,-0.35l2.12,1.16l1.51,2.54l0.05,1.88l0.94,0.87l0.93,2.25l0.92,0.18l0.84,-2.17l0.81,-0.48l0.82,0.81l2.89,0.62l2.31,1.26l0.16,4.01l0.5,1.1l1.69,0.72l0.35,1.69l1.89,0.68l3.52,2.26l2.81,2.59l0.56,1.28l2.28,2.67l1.34,0.78l2.34,-0.43l-0.17,-1.36l0.58,-1.62l2.7,-0.35l1.31,0.39l1.77,-0.7l3.1,2.19l5.35,0.78l2.2,-0.99l4.52,1.69l1.46,0.1l2.8,-0.73l1.01,-1.26l1.01,-0.17l1.53,0.29l0.93,-0.36l1.82,0.78l1.18,0.75l0.56,4.42l1.68,2.93l-0.99,2.48l0.98,0.08l19.25,9.7l0,0l-2.09,0.65l-1.22,1.86L398.1,330.52zM352.26,340.07l-0.78,-0.3l0.13,-1.52l1.74,0.36l0.44,0.52L352.26,340.07zM352.24,341.99l-0.9,-0.68l-1.64,0l0.76,-0.74l1.01,-0.2L352.24,341.99z"/>
<path id="AU-QLD" title="Queensland" class="land" d="M402.43,140.14l0.66,0.82l-1.28,-3.39l0.85,-2.22l0.86,0.03l1.32,2.67l4.26,2.27l-0.64,-2.37l0.3,-0.61l0.79,0.14l0.77,1.15l-0.24,1.31l1.47,2.09l-0.69,4.67l0.61,1.26l-0.13,1.68l0.72,1.46l1.69,0.61l1.57,2.78l1.13,0.41l1.66,1.78l1.33,0.68l-0.09,0.6l0.83,-0.4l0.28,-0.89l0.48,0.14l2.71,2.71l2.15,4.63l3.65,2.42l0.43,2.21l1.78,2.95l2.57,0.52l0.42,1.76l-0.58,1.51l0.29,2.07l0.69,0.44l0.58,1.42l1.6,0.99l-1.23,4.03l0.92,9.36l-1.33,1.14l0.33,1.66l2.08,2.02l0.68,2.33l0.92,1.29l0.32,0.87l-0.24,1.63l1.04,2.06l0,0l-0.81,0.66l-2.64,0.73l-0.83,1.1l-3.82,0.09l-1.78,-0.39l-1.19,-0.8l-1.28,1.38l-2.16,0.71l-2.27,1.44l0.98,2.22l-0.35,2.01l-2.08,1l-1.07,-1.1l-1.87,0.83l-0.98,2l-1.06,0.68l-0.68,-1.09l-0.13,-1.88l-2.77,-2.39l-2.74,-1.25l-3.45,0.29l-1.88,-1.44l-6.37,1.08l-1.4,-0.69l-1.2,0.33l-5.57,4.95l-86.31,0l0,0l-0.02,-36.54l-32.57,0l0,0l0,-109.55l0,0l3.15,2.11l3.79,0.42l2.21,1.09l1.82,0.26l1.42,1.97l0.23,1.46l1.06,1.58l1.92,0.41l1.95,1.6l2.15,0.62l2.22,1.56l4.1,-0.45l4.74,-2.51l1.34,-5.09l2.58,-3.35l1,-2.26l1.52,-4.82l-0.28,-1.89l0.65,-4.14l2.23,-5.7l-1.07,-2.94l-0.49,-3.15l0.86,-3.76l-1.33,-2.17l-0.09,-1.34l0.79,-3.28l1.59,-3.09l-1.03,-3.28l1.67,-1.47l0.53,-1.47l0.65,0.2l0.82,2.19l0.09,-0.47l-0.61,-1.78l-1.8,-2.33l0.32,-0.26l-0.93,-0.21l0.25,1.11l-0.63,0.2l-0.36,-0.42l1.97,-3.51l0.8,-2.48l0.47,-0.21l0.27,1.32l1.16,-0.23l-0.84,-1.58l1.91,-6.08l0.27,-4.66l2.12,-0.59l1.1,-2.04l1.83,0.45l-1.05,1.18l-0.08,1.01l1.08,-0.85l1.47,1.25l0.47,1.03l0.84,3.42l-0.07,4.87l1.18,1.04l1.46,-0.26l1.04,0.93l-1.05,1.69l-0.27,2.14l2.15,0.87l0.04,1.16l1.64,1.1l-0.73,2.57l1.65,0.33l0.08,4.71l0.79,1.42l-0.69,3.6l0.77,2l0.92,0.97l1.05,4.34l1.14,0.82l1.35,0.01l4.59,-2.6l0.45,-1.01l0.43,0.1l0.68,1.02l0.39,2.47l0.68,0.81l2.39,0.68l0.68,1.51l3.87,2.14l-0.88,2.11l0.6,2.2l-0.44,1.29l1.21,3.23l0,2.03l1.12,1.88l-0.65,4.02l4.39,5.32l1.36,-0.47l0.26,0.32l-0.79,1.95l1.62,3.31l0.79,3.7l-0.11,2.99l-1,2.12l0.08,1.09l2.2,2.88l1.32,0.5l-0.61,4l3.12,2.93l2.15,0.49l1.33,1.33l2.02,0.45l0.73,0.69l3.18,0.11l-0.33,-1.19l1.67,2.6l0.43,2.2l0.81,1.12l1.09,0.02l-0.09,-1.33l0.66,0.01l0.98,2.1l3.34,0.61l0.86,1.04l-0.26,0.44l1.51,1.49l0.57,-0.25l-0.15,-1.39l2.39,1.75l1.04,0.19l1.8,3.48l-1.56,-0.9l-0.53,0.22l-0.8,0.99l0.67,1.8l5.27,4.19l0.27,2.3l2.2,3.52l-0.14,2.21l0.99,3.54l1.91,3.19l-0.29,1.69l1.58,-1.3L402.43,140.14zM436.13,178.32l-0.91,-0.7l-0.59,-2.15l1.32,-2.63l-0.16,-1.29l2.07,-2.83l-0.03,-0.94l-0.86,-1.18l1.33,-1.38l0.09,2.44l0.88,1.31l-2.65,6.24L436.13,178.32zM284.87,73.53l0.18,-1.81l1.54,-1.55l2.47,-0.55l2.09,0.34l0.06,0.66l-0.47,0.22l-1.18,-0.23l-1,0.4l-0.51,1.46L284.87,73.53zM416,154.42l-1.75,-2.14l-0.52,-1.75l0.48,-0.11l1.73,1.31l0.83,2.26L416,154.42zM362.4,93.15l-0.75,-0.29l-0.21,-1.04l-1.25,-1.39l1.99,0.61l0.9,1.3L362.4,93.15zM439.66,201.72l0.29,-3.84l1.17,0.02l-0.94,3.76L439.66,201.72zM439.86,197.24l-0.72,-2.02l0,-1.64l0.93,-0.51L439.86,197.24zM317.82,6.96l-0.68,-0.55l-0.05,-0.69l1.1,-0.52l0.46,1.21L317.82,6.96zM318.87,1.42l-0.98,-0.67l0.42,-0.64l0.6,-0.11l0.61,0.61L318.87,1.42zM287.91,77.87l-0.31,-0.65l1.11,-1.04l0.56,0.4l0.18,0.83l-1.28,-0.03L287.91,77.87z"/>
<path id="AU-TAS" title="Tasmania" class="land" d="M369.2,414.49l-0.9,0.45l-0.2,-0.45l-1.4,-0.22l-0.94,-0.71l-3.29,-0.32l-0.7,-0.68l-1.31,0.4l-0.78,-0.26l-1.15,-1.81l0.64,-0.45l2.61,0.67l0.02,-0.98l-0.77,-0.64l-0.42,0.76l-3.12,-0.54l-2.62,-4.71l-0.91,-0.2l-0.56,-0.9l-1.15,-3.62l-1.02,-0.68l-0.59,-5.21l0.2,-0.26l2.2,1.98l0.47,2.18l0.9,-2.52l-1.02,-0.36l-1.93,-2.12l-0.35,-2.13l-3.18,-4.67l-2.92,-7.17l-0.73,-4.09l0.88,-0.8l0.02,-1.66l0.66,-0.44l2.43,0.29l1.42,1.05l1.72,-0.28l9.97,5.07l3.32,-0.1l0.94,0.53l-0.05,-0.5l1.62,-1.17l0.57,0.18l0.24,0.95l1.48,0.27l-1.3,-0.84l-0.05,-0.69l2.15,-1.2l1.41,0.47l2.27,-0.46l0.66,0.59l0.78,-0.47l1.34,-2.04l0.69,-0.17l1.77,0.86l0.69,-0.4l0.76,-1.69l1.17,0.34l2.1,1.89l0.6,1.35l-0.69,2.46l0.57,2.41l-0.47,1.72l0.44,2.29l-0.54,2.92l1.08,5.94l-0.57,0.81l-0.39,-0.33l0.37,-1.68l-1.24,-2.84l-1.26,2.5l-0.82,5.93l-0.65,1.34l0.12,1.52l-0.78,0.81l-0.44,1.48l0.62,0.2l0.12,-0.68l0.96,0.98l-0.52,2.59l0.48,2.15l-1.04,-0.66l-1.19,0.94l-1.72,-2.69l-0.14,-0.71l0.95,-1.17l0.82,1.67l1.28,-0.36l-0.8,-1.4l-2.91,-1.5l-0.6,0.45l0.55,1.75l-0.29,0.58l-1.07,0.35l-0.21,-2.25l-0.98,-0.63l0.34,0.86l-1.16,3.39l0.06,2.01l-0.75,0.19l-0.87,-0.56l-0.94,-1.87l-0.46,0.27l-0.01,1l1.37,1.25L369.2,414.49zM382.36,365.85l-0.98,-0.54l-0.22,-1.36l-1.24,-2.33l-1.55,-1.38l1.32,-1.74l0.93,-0.4l2.15,2.87l1.33,0.92l0.47,3.17L382.36,365.85zM336.69,363.9l-0.38,-0.28l0.06,-1.87l-0.62,-0.81l0.03,-0.77l0.19,-2.27l0.85,-0.63l0.02,-1.18l0.46,-0.13l1.42,1.24l0.41,3.76l-0.44,1.51L336.69,363.9zM384.64,369.1l-0.23,-0.97l-2.52,0.32l-0.97,-0.42l0.02,-0.55l0.72,-0.59l1.49,0.19l1.52,-0.77l1.48,1.76L384.64,369.1zM373.39,412.93l-1.38,-0.17l-0.57,-1.19l1.92,-2.37l0.7,1.83L373.39,412.93zM499.07,600l-0.48,-0.05l-0.01,-1.54l0.62,-2.78l0.75,-0.81L499.07,600zM374.03,409.2l-0.75,-1.57l0.7,-1.22l0.82,2.48L374.03,409.2zM381.12,401.66l0.05,-1.96l1.19,-0.43l0.44,1.11l-0.76,0.01L381.12,401.66zM347.19,372.32l-0.25,-0.83l0.65,-0.77l0.98,1.12L347.19,372.32z"/>
</g>
</svg>
If you are wondering I am getting an error: Uncaught DOMException: CanvasRenderingContext2D.drawImage: Passed-in image is "broken" when I attempt to draw it.
Your SVG needs a proper viewBox and a good clean:
<svg viewBox="0 0 450 450" style="height:180px">
<style>
#territories path {
fill: #CCCCCC;
fill-opacity: 1;
stroke: white;
stroke-opacity: 1;
stroke-width: 0.5;
}
</style>
<rect x="0" y="0" width="100%" height="100%" fill="blue" />
<g id="territories">
<path id="AU-NT" title="Northern Territory"
d="M195.29,27.56l0.63,-1.15l-1.5,-1.01l0.76,-1l1.53,0.05l-0.03,-2.3l5.08,1.63l4.76,-0.32l1.42,0.45l1.75,-1.2l1.49,0.03l0.61,1.16l-0.37,0.8l0.66,-0.86l0,-1.68l1.45,-0.52l1.85,0.36l-1.2,-0.63l-0.12,-0.51l0.08,-3.17l0.61,-0.96l-2.19,-2l-1.27,-0.43l-3.1,0.96l-1.26,-1.76l-1.14,-0.61l-1.02,0.09l1.12,-1.54l1.2,-0.55l1.15,1.13l0.82,1.94l0.76,-0.56l-0.96,-2.37l1.41,0.26l0.7,-0.37l1.77,1.48l1.83,2.68l0.59,0.13l1.61,-2.05l0.47,0.04l2.88,4.18L222,17.2l0.55,0.8l1.54,0.65l1.26,-0.15l1.46,-1.11l1.18,0.2l-0.75,1.3l1.12,0.64l1.17,-0.75l1.47,1.12l0.23,1.27l1.77,-0.26l1.59,0.32l2.77,-0.78l1.08,1.5l2.31,1.49l1.6,0.31l1.05,-2.02l2.8,-0.15l0.83,-0.67l-0.87,0.23l0.12,-1.1l1.74,-0.25l1.38,-1.1l-0.04,-0.77l0.4,0.01l0.37,0.43l-2.18,2.1l0.46,0.54l-1.29,1.62l0.72,0.99l1.61,-1.42l1.51,-0.44l-0.92,1.16l0.37,0.56l0.8,-0.37l0.19,0.33l-0.87,1.26l0.61,1.04l2.18,-0.18l0.58,-0.45l0.76,-1.93l-2.02,-0.8l2.97,-2.35l1.21,-0.22l-0.25,0.83l1.46,3.03l0.91,-0.31l-0.69,-0.71l0.88,-0.22l1.1,0.56l1.11,1.5l-2.53,2.05l-1.1,1.77l-0.25,1.34l-1.37,-0.51l0.55,3.05l-0.95,2.19l-0.1,-0.35l-0.88,0.3l-0.12,-2.14l-1.7,2.05l-1.12,-0.6l-1.84,1.03l-0.39,0.67l0.47,0.65l-0.77,1.05l-0.2,1.25l0.89,1.61l1.07,-0.68l-1.4,5.06l-2.99,3.28l-0.9,2.33l-1.8,0.92l1.13,2.63l7.99,4.81l1.17,2.34l2.7,1.29L259,63.9l2.87,0.12l3.68,2.39l4,1.39l1.32,2.1l1.54,1.31l0,0l0,109.55l0,0l-97.64,0.07l0,0L174.7,52.34l0,0l2.01,1.22l0.06,2.26l0.71,-0.88l-0.29,-2.96l2.52,1.02l2.33,3.05l0.6,-0.23l-1.15,-1.79l0.23,-2.05l1.67,0.29l1.55,-1.07l-1.94,0.61l-0.98,-0.63l-0.96,-1.54l1.27,-0.29l0.75,-0.74L181.86,49l-1.3,-0.24l-1.97,-1.52l0.13,-0.89l1.33,-2.13l2.61,-1.64l1.04,-5.31l0.77,-0.8l0.48,0.91l1.05,-0.19l2.42,-2.05l-1.61,-1.97l0.27,-2.46l0.45,-0.2l0.47,0.43l1.11,-0.58l0.29,-2.45l1.68,-0.75l1,1.14l0.96,-0.07l-0.92,-0.27l-0.31,-1.17l0.37,-1.59l-0.33,-0.25l2.07,0.27L195.29,27.56zM195.97,19.82l-5.05,-3.27l-1.4,-4.28l0.3,-0.99l1.96,2.05l1.43,0.45l2.11,-0.91l1.14,0.49l1.6,-1.01l0.78,1.55l-0.33,-1.21l0.85,-1.12l1.59,0.64l1.2,1.58l0.09,0.83l-2.77,2.91L195.97,19.82zM260.56,44.63l0.64,-0.31l-0.28,1.4l-0.57,0.22l-5.55,-0.91l0.55,-3.66l0.31,-0.53l1.81,-0.55l-0.31,-0.7l0.91,-0.76l0.47,0.03l-0.5,0.81l0.4,1.16l1.03,0.18l0.8,-1.13l0.4,0.63l-1.64,1.47l-0.64,2.51l1.76,0.49L260.56,44.63zM190.91,18.71l-1.8,-0.69l-2.51,0.64l-0.78,-0.39l0.52,-1.37l0.91,0.32l0.4,-0.39l-0.21,-2.01l0.89,-1.55l0.96,-0.2l1.6,4l1.58,0.93l-0.25,0.55L190.91,18.71zM256.16,14.5l2.94,-4.79l-0.53,2.04l-1.77,2.48L256.16,14.5zM213.74,13.27l-1.02,-3.23l0.83,-0.32l0.52,1.71L213.74,13.27zM262.14,63.06l-1.3,-1.47l0.82,-1.19l0.9,1.94L262.14,63.06zM252.88,41.08l-0.31,-1.01l-0.11,0.72l-0.62,-0.21l0.1,-0.93l0.95,-0.75l0.95,0.73L252.88,41.08zM252.68,17.08l0,-0.51l0.99,-0.79l0.82,-0.04l1.44,-1.12L254.74,16L252.68,17.08zM256.39,61l-0.06,-1.08l0.93,-0.28l-0.19,1.23L256.39,61z" />
<path id="AU-WA" title="Western Australia"
d="M14.47,180.78l0.2,-1.84l-2.43,-2.57l-2.47,-5.41l-1.15,-0.7l-0.98,-2.78l0.03,-1.61l-2.44,-3.85l-0.06,-2.35l1.61,-5.6l0.75,-1.5l1.54,-1.21l0.27,-1.01l-0.09,-2.91l0.63,-1.92l-0.12,-1.14l-1.64,-3.85l3.01,-7.33l1.05,-1.56l1.44,-0.5l0.14,0.28l-1.07,4.09l0.7,1.48l-0.34,2.16l0.47,0.48l2.37,-1l3.02,-7.02l3.17,-1.76l1.19,-0.09l4.33,-1.9l1.82,-2.15l2.03,-1.1l1.29,-1.94l2.55,-1.19l0.97,-1.12l2.46,-0.73l2.52,-1.81l1.83,0.79l2.07,-1.11l2.99,1.26l3.72,-0.63l1.79,-0.78l3.56,-2.99l0.61,0.29l6.15,-1.02l1.94,-2.81l1.09,-0.83l1.18,-0.11l4.27,1.28l2.21,-1.14l5.99,-1.07l7.49,-3.28l2.71,-2.26l2.3,-3.11l1.64,-3.53l1.5,-2.02l0.25,-1.78l1.51,-0.37l4.32,-3.6l0.26,-1.43l-1.18,-0.54L101,86.33l-0.12,-2.14l-0.64,-1.66l0.37,-3.56l2.22,-2.79l0.74,-0.47l1.38,-0.01l-0.55,-1.23l0.46,-0.62l2.02,-0.31l0.09,-1.82l1.45,-1.11l0.28,-0.99l0.77,-0.28l0.74,0.74l-0.77,0.23l-0.36,1.25l1.52,1.46l5.2,9.95l-0.13,-2.6l0.6,-1.82l-0.49,-1.5l0.2,-0.86l0.69,-0.02l2.17,2.39l0.65,0.02l-0.91,-0.81l-0.39,-1.56l1.03,-1.18l-1.36,-0.06l-1.72,-2.42l0.06,-1.23l-1.22,0.02l-0.83,-0.75l2.34,0.34l0.74,-1.12l-0.02,-1.01l-1.6,-0.58l0.12,-1.31l1.69,-0.37l0.87,0.68l-0.8,0.68l1.72,1.34l0.79,-1.5l1.91,0.45l0.98,1.34l1.12,0.06l0.56,-0.64l0.99,0.48l4.53,0.12l-3.02,-0.89l-2.33,0.02l-0.27,-1.21l0.59,-1.34l0.44,-0.1l0.52,0.79l0.81,-0.56l0.24,-2.2l1.22,-1.23l-1.2,-0.07l-0.88,1.5l-1.46,-0.81l-0.31,-2.2l0.93,-2.13l1.35,0.43l0.81,-0.42l0.08,-2.42l0.46,-0.11l5.17,2.99l-1.14,-1.01l0.23,-1.44l-2.01,0.38l0.28,-1.2l0.73,0l0.43,-0.74l-1.76,0.85l-0.62,-0.86l0.82,-0.67l0.87,0.12l1.06,-1.24l0.94,1.82l-0.03,-1.44l1.74,1.36l1.23,-0.26l-2.73,-2.06l0.65,-0.52l-1.16,-1.72l2.17,-2.5l2.74,0.29l-0.1,-2.68l0.42,-0.96l1.2,0.57l-0.94,3.98l0.87,-2.52l1.31,0.67l-0.2,1.2l0.84,0.79l1.46,-1.43l1.18,-4.29l-0.71,-1.82l-0.69,-0.44l2.17,0.39l-0.09,0.84l-0.56,0.24l0.37,1.22l1.04,0.72l0.5,-2.03l1.83,-0.95l-0.51,1.25l1.58,1.69l2.05,-2.87l-0.47,-1.96l1.22,-0.49l1.06,-0.25l0.67,0.54l1.2,2.17l0.28,-0.79l2.94,0.6l1.04,1.47l1.49,1l3.25,4.52l0.47,-0.23l1.84,1.58l0.2,1.09l-1.29,3.36l0.04,3.31l-0.57,1.14l0.83,-0.72l0.38,-2.46l1.36,1.03l0.32,1.06l0.05,-1.08l-1.08,-2.67l1.24,-1.7l0.51,1.47l1.03,0.03l-0.66,-2.76l1.61,-0.46l5.04,1.26l0,0l0.06,128.49l0,0L174.7,251l0,0l-8.88,4.31l-9.21,3l-7.03,0.63l-5.51,-0.99l-1.2,0.59l-1.05,-0.23l-4.96,3.58l-2.31,0.67l-6.03,3.84l-5.04,1.13l-1.91,1.98l-1.63,5.43l-2.02,1.76l-0.38,1.1l-2.11,1.64l-1.87,-0.14l-2.18,1.61l-0.73,-1.72l-0.9,-0.38l-1.88,0.64l-5.33,0.08l-1,0.69l-0.12,0.66l-1.44,0.15l-0.42,-0.14l-0.09,-1.62l-0.84,-0.89l-2.31,0.97l-3.47,-1.07l-6.5,0.51l-3.5,0.79l-1.34,0.74l-4.47,-0.59l-2.08,0.64l-2.14,1.59l-1.61,3.03l-1.54,1.51l-1.27,0.75l-3.22,-0.67l-1.87,1.27l0.16,0.75l-0.38,0.43l-2.63,1.1l-2.12,2.39l-2.17,1.16l-2.65,0.48l0.21,0.55l1.5,0.33l-0.67,0.38l-2.25,-1.02l-1.02,0.28l-0.25,0.91l-3.01,-1.58L43.87,294l-0.82,0.54l-4.48,-0.75l-2.64,-1.76l-2.64,-0.61l-1.73,-2.78l-3.46,-2.94l-2.76,-1.12l-1.29,0.85l-1.23,-1.31l-0.6,-7.43l0.47,-2.18l2.43,1.68l1.92,-0.41l3.43,-4.63l-1.28,-7.64l1.09,-1.9l-0.68,1.62l0.94,1.56l0.47,-2.54l-0.61,-10.92l-7.15,-15.29l-0.26,-2.89l-0.94,-2.67l0.44,-7.12l-0.98,-3.49l-0.57,-1.35l-2.34,-2.78l-0.38,-2.93l-0.88,-1.78l-3.78,-4.87l-0.65,-2.93l0.5,-1.76l-0.21,-1.27l-2,-4.92l-3.81,-6.15l-3.31,-3.52l-0.61,-1.93l0.69,-2.54l0.5,3.02l0.34,-1.92l1.61,1.99l0.35,2.7l1.05,1.77l1.53,-0.61l0.78,-1.16l0.06,-2.06l-3.37,-3.15l-0.63,-2.6l-1.1,-1.78l0.85,-2.03l2.47,3.05l0.4,1.13l-0.57,1.75l0.35,1.95l0.92,-0.34l0.87,-1.68l0.87,3.6l1.2,1.61l1.36,-1.07l0.29,-0.97l-0.54,-1.32l0.37,-2.33L14.47,180.78zM3.24,182.51l-2.75,-4.33L0,176.3l0.51,-1.67l0.54,0.13l-0.17,0.86l2.39,5.66L3.24,182.51zM126.09,58.75l-0.58,-1.35l0.98,-0.72l0.94,1.57L126.09,58.75zM26.72,120.51L26,120.37l0.01,-0.61l1.47,-1.72l0.23,1.22L26.72,120.51zM132.78,49.85l-0.57,-0.31l0.07,-0.85l0.76,-1.17l0.5,0.56L132.78,49.85z" />
<path id="AU-ACT" title="Australian Capital Territory"
d="M392.28,306.01L391.02,305.37L391.02,305.37L389.29,302.43L389.31,300.59L389.83,298.03L392.68,295.93L396.19,298.12L393.88,298.81L393.36,299.53L392.74,302.02L392.9,305.16L392.9,305.16z" />
<path id="AU-NSW" title="New South Wales"
d="M402.43,327.48l-19.25,-9.7l-0.98,-0.08l0.99,-2.48l-1.68,-2.93l-0.56,-4.42l-1.18,-0.75l-1.82,-0.78l-0.93,0.36l-1.53,-0.29l-1.01,0.17l-1.01,1.26l-2.8,0.73l-1.46,-0.1l-4.52,-1.69l-2.2,0.99l-5.35,-0.78l-3.1,-2.19l-1.77,0.7l-1.31,-0.39l-2.7,0.35l-0.58,1.62l0.17,1.36l-2.34,0.43l-1.34,-0.78l-2.28,-2.67l-0.56,-1.28l-2.81,-2.59l-3.52,-2.26l-1.89,-0.68l-0.35,-1.69l-1.69,-0.72l-0.5,-1.1l-0.16,-4.01l-2.31,-1.26l-2.89,-0.62l-0.82,-0.81l-0.81,0.48l-0.84,2.17l-0.92,-0.18l-0.93,-2.25l-0.94,-0.87l-0.05,-1.88l-1.51,-2.54l-2.12,-1.16l-1.7,0.35l-1.61,-0.42l-2.1,1.48l-3.19,-1.83l-1.87,-0.14l-0.84,-0.6l0,0l0.05,-63.7l0,0l86.31,0l5.57,-4.95l1.2,-0.33l1.4,0.69l6.37,-1.08l1.88,1.44l3.45,-0.29l2.74,1.25l2.77,2.39l0.13,1.88l0.68,1.09l1.06,-0.68l0.98,-2l1.87,-0.83l1.07,1.1l2.08,-1l0.35,-2.01l-0.98,-2.22l2.27,-1.44l2.16,-0.71l1.28,-1.38l1.19,0.8l1.78,0.39l3.82,-0.09l0.83,-1.1l2.64,-0.73l0.81,-0.66l0,0l0.78,0.71l0.15,0.81l-0.35,2.67l0.7,2.08l-0.2,2.48l-1.71,2.24l-1.2,3.52l0.3,0.87l-1.21,6.89l-2.55,7.71l-0.14,3.35l0.75,1.43l-2.46,8.95l-3.66,6.04l0.19,3.48l-4.37,3.57l0.19,1.13l-3.61,1.52l-2.58,4.88l-1.3,0.64l-0.11,0.59l0.46,0.41l-0.35,1.39l-1.24,1.66l-0.73,4.43l-1.88,0.58l1.04,0.56l-2.83,3.59l-1.02,2.97l0.44,0.54l-0.54,2.46l-0.92,1.21l1.14,1.9l-0.17,0.88l-0.29,0.25l-0.36,-0.39l-0.02,-0.88l-0.98,0.4l0.2,1.12l-1.77,1.32l-4.1,9.49l-0.29,5.19l-0.63,0.82l-1.9,7.2l0.05,1.97l1.08,1.25l0.14,0.94l-0.01,0.45l-0.77,0.24L402.43,327.48zM392.74,302.02l0.62,-2.48l0.52,-0.73l2.31,-0.68l-3.5,-2.19l-2.85,2.1l-0.52,2.56l-0.02,1.85l1.73,2.94l0,0l1.35,0.59l0.53,-0.8L392.74,302.02z" />
<path id="AU-SA" title="South Australia"
d="M254.01,283.28l-1.08,1.74l-0.88,0.39l-0.93,1.59l-1.12,0.7l-0.67,1.33l-0.77,2.33l0.75,0.06l1.45,-1.02l0.15,0.69l-0.17,2.59l-0.52,0.22l-1.84,-1.95l-0.68,0.1l-0.48,1.13l-0.39,-0.01l-3.44,-4.32l-1.2,-0.78l-1.12,0.39l1.04,-2.08l0.05,0.82l1.42,1.52l0.57,0.39l1.08,-0.35l-1.23,-0.85l-1.31,-7.14l-2.47,-3.1l-2.09,-1.7l0.19,-2.15l-1.63,-3.81l-1.24,-0.48l-2.87,0.81l-0.66,-0.74l-2.11,-5.47l0.87,0.06l0.58,1.05l0.96,-1.67l-0.22,-1.14l-1.76,-1.73l-2.84,1.13l0.33,-1.76l0.73,-0.08l-1.35,-1.88l-1.78,-1.26l0.12,-0.47l-0.74,-0.23l-1.31,1.43l-3.46,-0.24l-4.14,-2.99l-2.18,-0.26l-2.79,1.3l-1.43,-0.14l-4.63,-3.88l-6.74,-3.15l-3.85,1.73l-7,-0.39L174.7,251l0,0l0.06,-70.18l0,0l97.64,-0.07l0,0l32.57,0L305,217.3l0,0l-0.05,63.7l0,0l-0.28,-0.37l-0.04,54.4l0,0l-2.93,0.11l-1.83,-0.98l-1.89,-1.9l-2.55,-4.52l-1.38,-0.52l-2.63,-3.98l0.34,-0.7l-0.54,-1.81l0.2,-1.25l1.19,-1.71l-0.42,-3.24l-1.9,-4.63l-3,-4l-3.14,-3.08l3.49,2.76l2.78,4.4l-1.02,-2.95l-5.07,-5.1l-0.02,-1.18l0.67,-0.27l0.82,0.71l0.07,1.9l1.02,-0.11l0.23,-4.21l-1.56,-0.77l-0.84,0.83l-1.79,0.39l-0.11,0.89l0.83,0.46l-0.49,0.63l-2.93,-0.25l-2.01,1.52l-3.92,0.21l-0.89,-0.67l0.65,-1.15l1.44,-0.72l1.66,-1.79l0.28,-3.05l0.53,-1.16l-0.2,-3.9l-2.4,-3.27l-0.6,-2.16l-1.38,-2.35l-0.93,1.6l0.13,1.14l-1.03,1.06l-0.38,1.31l-0.15,2.44l-1.38,5.56l-0.8,0.65l-2.75,-0.81l-2.04,0.77l-0.72,0.93l-1.51,-0.23l-1.47,0.97l-0.66,-0.69l1.14,-1.38l0.95,-3.24l0.91,0.36l1.89,-0.3l1.12,0.72l0.54,-0.29l0.7,-3.69l-0.06,-4.88l-0.45,-1.65l1,-0.85l0.64,-2.76l3.75,-4.22l-1.46,-3.64l0.33,-0.98l2.19,-0.94l-0.08,-0.66l-0.93,-0.89l-1.5,-5.68l-0.58,-0.44l-0.09,2.09l0.5,0.58l0.07,1.37l-0.36,1.86l-1.95,0.48l-1.16,1.26l-3.02,6.97l-0.74,0.62l-1.32,0.05l-0.77,-0.47l-0.93,1.64l-4.89,3.05L254.01,283.28zM271.44,303.46l1.65,0.45l0.54,1.42l-0.79,0.71l-1.29,-0.63l-1.74,-0.13l-1.53,0.72l-0.06,1.2l-1.73,1.01l-1.06,-1.08l-1.43,-0.27l-0.82,0.8l-4.75,0.17l-1.89,-1.86l0.46,-1.97l5.85,-1.43l2.14,-0.95l2.27,0.19l0.64,0.61l0.14,1.28l2.1,0.75l0.64,0.05L271.44,303.46z" />
<path id="AU-VIC" title="Victoria"
d="M398.1,330.52l-2.92,0.82l-10.86,0.36l-5.97,2.2l-4.2,3.51l-5.42,5.71l-4.8,0.91l-2.3,-0.02l-0.38,0.57l1.21,2.21l1.25,-0.88l0.23,-0.84l0.39,0.18l0.16,3.76l-0.97,0.99l-0.81,-0.69l-0.79,-2.07l-1.14,-1.43l-0.84,-0.36l-0.68,0.6l-1.07,-0.09l-0.96,-2.84l-0.96,-0.15l-1.31,0.58l-2.08,-1.91l0.18,-1.29l1.34,-1.08l-1.21,-2.03l-2.05,0.15l-0.46,1.54l-1.98,2.04l-1.4,0.12l-1.52,-1.77l2.43,-0.51l1.59,-2.8l-0.35,-1.29l-1.97,-2.39l-4.24,3.19l-1.72,0.35l0.06,0.5l1.5,0.26l1.35,-0.65l0.75,0.21l0.05,1.01l-0.56,0.86l-3.21,0.54l-3.27,2.21l-2.38,2.93l-1.2,0.33l-2.05,1.93l-5.37,-3.08l-2.66,-0.85l-2.91,-2.25l-1.69,-0.67l-2.38,0.5l-2.12,-1.49l-2.32,-0.34l-1.42,0.75l0.33,1.08l-0.86,0.24l-1.27,-0.62l-2.83,-2.92l-2.44,-1.32l0,0l0.04,-54.4l0.28,0.37l0,0l0.84,0.6l1.87,0.14l3.19,1.83l2.1,-1.48l1.61,0.42l1.7,-0.35l2.12,1.16l1.51,2.54l0.05,1.88l0.94,0.87l0.93,2.25l0.92,0.18l0.84,-2.17l0.81,-0.48l0.82,0.81l2.89,0.62l2.31,1.26l0.16,4.01l0.5,1.1l1.69,0.72l0.35,1.69l1.89,0.68l3.52,2.26l2.81,2.59l0.56,1.28l2.28,2.67l1.34,0.78l2.34,-0.43l-0.17,-1.36l0.58,-1.62l2.7,-0.35l1.31,0.39l1.77,-0.7l3.1,2.19l5.35,0.78l2.2,-0.99l4.52,1.69l1.46,0.1l2.8,-0.73l1.01,-1.26l1.01,-0.17l1.53,0.29l0.93,-0.36l1.82,0.78l1.18,0.75l0.56,4.42l1.68,2.93l-0.99,2.48l0.98,0.08l19.25,9.7l0,0l-2.09,0.65l-1.22,1.86L398.1,330.52zM352.26,340.07l-0.78,-0.3l0.13,-1.52l1.74,0.36l0.44,0.52L352.26,340.07zM352.24,341.99l-0.9,-0.68l-1.64,0l0.76,-0.74l1.01,-0.2L352.24,341.99z" />
<path id="AU-QLD" title="Queensland"
d="M402.43,140.14l0.66,0.82l-1.28,-3.39l0.85,-2.22l0.86,0.03l1.32,2.67l4.26,2.27l-0.64,-2.37l0.3,-0.61l0.79,0.14l0.77,1.15l-0.24,1.31l1.47,2.09l-0.69,4.67l0.61,1.26l-0.13,1.68l0.72,1.46l1.69,0.61l1.57,2.78l1.13,0.41l1.66,1.78l1.33,0.68l-0.09,0.6l0.83,-0.4l0.28,-0.89l0.48,0.14l2.71,2.71l2.15,4.63l3.65,2.42l0.43,2.21l1.78,2.95l2.57,0.52l0.42,1.76l-0.58,1.51l0.29,2.07l0.69,0.44l0.58,1.42l1.6,0.99l-1.23,4.03l0.92,9.36l-1.33,1.14l0.33,1.66l2.08,2.02l0.68,2.33l0.92,1.29l0.32,0.87l-0.24,1.63l1.04,2.06l0,0l-0.81,0.66l-2.64,0.73l-0.83,1.1l-3.82,0.09l-1.78,-0.39l-1.19,-0.8l-1.28,1.38l-2.16,0.71l-2.27,1.44l0.98,2.22l-0.35,2.01l-2.08,1l-1.07,-1.1l-1.87,0.83l-0.98,2l-1.06,0.68l-0.68,-1.09l-0.13,-1.88l-2.77,-2.39l-2.74,-1.25l-3.45,0.29l-1.88,-1.44l-6.37,1.08l-1.4,-0.69l-1.2,0.33l-5.57,4.95l-86.31,0l0,0l-0.02,-36.54l-32.57,0l0,0l0,-109.55l0,0l3.15,2.11l3.79,0.42l2.21,1.09l1.82,0.26l1.42,1.97l0.23,1.46l1.06,1.58l1.92,0.41l1.95,1.6l2.15,0.62l2.22,1.56l4.1,-0.45l4.74,-2.51l1.34,-5.09l2.58,-3.35l1,-2.26l1.52,-4.82l-0.28,-1.89l0.65,-4.14l2.23,-5.7l-1.07,-2.94l-0.49,-3.15l0.86,-3.76l-1.33,-2.17l-0.09,-1.34l0.79,-3.28l1.59,-3.09l-1.03,-3.28l1.67,-1.47l0.53,-1.47l0.65,0.2l0.82,2.19l0.09,-0.47l-0.61,-1.78l-1.8,-2.33l0.32,-0.26l-0.93,-0.21l0.25,1.11l-0.63,0.2l-0.36,-0.42l1.97,-3.51l0.8,-2.48l0.47,-0.21l0.27,1.32l1.16,-0.23l-0.84,-1.58l1.91,-6.08l0.27,-4.66l2.12,-0.59l1.1,-2.04l1.83,0.45l-1.05,1.18l-0.08,1.01l1.08,-0.85l1.47,1.25l0.47,1.03l0.84,3.42l-0.07,4.87l1.18,1.04l1.46,-0.26l1.04,0.93l-1.05,1.69l-0.27,2.14l2.15,0.87l0.04,1.16l1.64,1.1l-0.73,2.57l1.65,0.33l0.08,4.71l0.79,1.42l-0.69,3.6l0.77,2l0.92,0.97l1.05,4.34l1.14,0.82l1.35,0.01l4.59,-2.6l0.45,-1.01l0.43,0.1l0.68,1.02l0.39,2.47l0.68,0.81l2.39,0.68l0.68,1.51l3.87,2.14l-0.88,2.11l0.6,2.2l-0.44,1.29l1.21,3.23l0,2.03l1.12,1.88l-0.65,4.02l4.39,5.32l1.36,-0.47l0.26,0.32l-0.79,1.95l1.62,3.31l0.79,3.7l-0.11,2.99l-1,2.12l0.08,1.09l2.2,2.88l1.32,0.5l-0.61,4l3.12,2.93l2.15,0.49l1.33,1.33l2.02,0.45l0.73,0.69l3.18,0.11l-0.33,-1.19l1.67,2.6l0.43,2.2l0.81,1.12l1.09,0.02l-0.09,-1.33l0.66,0.01l0.98,2.1l3.34,0.61l0.86,1.04l-0.26,0.44l1.51,1.49l0.57,-0.25l-0.15,-1.39l2.39,1.75l1.04,0.19l1.8,3.48l-1.56,-0.9l-0.53,0.22l-0.8,0.99l0.67,1.8l5.27,4.19l0.27,2.3l2.2,3.52l-0.14,2.21l0.99,3.54l1.91,3.19l-0.29,1.69l1.58,-1.3L402.43,140.14zM436.13,178.32l-0.91,-0.7l-0.59,-2.15l1.32,-2.63l-0.16,-1.29l2.07,-2.83l-0.03,-0.94l-0.86,-1.18l1.33,-1.38l0.09,2.44l0.88,1.31l-2.65,6.24L436.13,178.32zM284.87,73.53l0.18,-1.81l1.54,-1.55l2.47,-0.55l2.09,0.34l0.06,0.66l-0.47,0.22l-1.18,-0.23l-1,0.4l-0.51,1.46L284.87,73.53zM416,154.42l-1.75,-2.14l-0.52,-1.75l0.48,-0.11l1.73,1.31l0.83,2.26L416,154.42zM362.4,93.15l-0.75,-0.29l-0.21,-1.04l-1.25,-1.39l1.99,0.61l0.9,1.3L362.4,93.15zM439.66,201.72l0.29,-3.84l1.17,0.02l-0.94,3.76L439.66,201.72zM439.86,197.24l-0.72,-2.02l0,-1.64l0.93,-0.51L439.86,197.24zM317.82,6.96l-0.68,-0.55l-0.05,-0.69l1.1,-0.52l0.46,1.21L317.82,6.96zM318.87,1.42l-0.98,-0.67l0.42,-0.64l0.6,-0.11l0.61,0.61L318.87,1.42zM287.91,77.87l-0.31,-0.65l1.11,-1.04l0.56,0.4l0.18,0.83l-1.28,-0.03L287.91,77.87z" />
<path id="AU-TAS" title="Tasmania"
d="M369.2,414.49l-0.9,0.45l-0.2,-0.45l-1.4,-0.22l-0.94,-0.71l-3.29,-0.32l-0.7,-0.68l-1.31,0.4l-0.78,-0.26l-1.15,-1.81l0.64,-0.45l2.61,0.67l0.02,-0.98l-0.77,-0.64l-0.42,0.76l-3.12,-0.54l-2.62,-4.71l-0.91,-0.2l-0.56,-0.9l-1.15,-3.62l-1.02,-0.68l-0.59,-5.21l0.2,-0.26l2.2,1.98l0.47,2.18l0.9,-2.52l-1.02,-0.36l-1.93,-2.12l-0.35,-2.13l-3.18,-4.67l-2.92,-7.17l-0.73,-4.09l0.88,-0.8l0.02,-1.66l0.66,-0.44l2.43,0.29l1.42,1.05l1.72,-0.28l9.97,5.07l3.32,-0.1l0.94,0.53l-0.05,-0.5l1.62,-1.17l0.57,0.18l0.24,0.95l1.48,0.27l-1.3,-0.84l-0.05,-0.69l2.15,-1.2l1.41,0.47l2.27,-0.46l0.66,0.59l0.78,-0.47l1.34,-2.04l0.69,-0.17l1.77,0.86l0.69,-0.4l0.76,-1.69l1.17,0.34l2.1,1.89l0.6,1.35l-0.69,2.46l0.57,2.41l-0.47,1.72l0.44,2.29l-0.54,2.92l1.08,5.94l-0.57,0.81l-0.39,-0.33l0.37,-1.68l-1.24,-2.84l-1.26,2.5l-0.82,5.93l-0.65,1.34l0.12,1.52l-0.78,0.81l-0.44,1.48l0.62,0.2l0.12,-0.68l0.96,0.98l-0.52,2.59l0.48,2.15l-1.04,-0.66l-1.19,0.94l-1.72,-2.69l-0.14,-0.71l0.95,-1.17l0.82,1.67l1.28,-0.36l-0.8,-1.4l-2.91,-1.5l-0.6,0.45l0.55,1.75l-0.29,0.58l-1.07,0.35l-0.21,-2.25l-0.98,-0.63l0.34,0.86l-1.16,3.39l0.06,2.01l-0.75,0.19l-0.87,-0.56l-0.94,-1.87l-0.46,0.27l-0.01,1l1.37,1.25L369.2,414.49zM382.36,365.85l-0.98,-0.54l-0.22,-1.36l-1.24,-2.33l-1.55,-1.38l1.32,-1.74l0.93,-0.4l2.15,2.87l1.33,0.92l0.47,3.17L382.36,365.85zM336.69,363.9l-0.38,-0.28l0.06,-1.87l-0.62,-0.81l0.03,-0.77l0.19,-2.27l0.85,-0.63l0.02,-1.18l0.46,-0.13l1.42,1.24l0.41,3.76l-0.44,1.51L336.69,363.9zM384.64,369.1l-0.23,-0.97l-2.52,0.32l-0.97,-0.42l0.02,-0.55l0.72,-0.59l1.49,0.19l1.52,-0.77l1.48,1.76L384.64,369.1zM373.39,412.93l-1.38,-0.17l-0.57,-1.19l1.92,-2.37l0.7,1.83L373.39,412.93zM499.07,600l-0.48,-0.05l-0.01,-1.54l0.62,-2.78l0.75,-0.81L499.07,600zM374.03,409.2l-0.75,-1.57l0.7,-1.22l0.82,2.48L374.03,409.2zM381.12,401.66l0.05,-1.96l1.19,-0.43l0.44,1.11l-0.76,0.01L381.12,401.66zM347.19,372.32l-0.25,-0.83l0.65,-0.77l0.98,1.12L347.19,372.32z" />
</g>
</svg>
I'm trying to make an svg animation where the color of the svg slides to an other color. My goal is to make kind of a running light.
I'm not trying to fade the fill color of the whole svg as seen in a lot of examples.
Here is an example photo with a few frames of the animation. svg animation
I've tried a few different technics but couldn't find a good one.
This is how i did it with css keyframes:
$.keyframe.define([{
name: 'shift',
'0%': {'background-position':'0px'},
'2%': {'background-position':'6px'},
'4%': {'background-position':'12px'},
'6%': {'background-position':'18px'},
'8%': {'background-position':'24px'},
'10%': {'background-position':'30px'},
'12%': {'background-position':'36px'},
'14%': {'background-position':'42px'},
'16%': {'background-position':'48px'},
'18%': {'background-position':'54px'},
'20%': {'background-position':'60px'},
'22%': {'background-position':'66px'},
'24%': {'background-position':'72px'},
'26%': {'background-position':'78px'},
'28%': {'background-position':'84px'},
'30%': {'background-position':'90px'},
'32%': {'background-position':'96px'},
'34%': {'background-position':'102px'},
'36%': {'background-position':'108px'},
'38%': {'background-position':'114px'},
'40%': {'background-position':'120px'},
'42%': {'background-position':'126px'},
'44%': {'background-position':'132px'},
'46%': {'background-position':'138px'},
'48%': {'background-position':'144px'},
'50%': {'background-position':'150px'},
'52%': {'background-position':'156px'},
'54%': {'background-position':'162px'},
'56%': {'background-position':'168px'},
'58%': {'background-position':'174px'},
'60%': {'background-position':'180px'},
'62%': {'background-position':'186px'},
'64%': {'background-position':'192px'},
'66%': {'background-position':'198px'},
'68%': {'background-position':'204px'},
'70%': {'background-position':'210px'},
'72%': {'background-position':'216px'},
'74%': {'background-position':'222px'},
'76%': {'background-position':'228px'},
'78%': {'background-position':'234px'},
'80%': {'background-position':'240px'},
'82%': {'background-position':'246px'},
'84%': {'background-position':'252px'},
'86%': {'background-position':'258px'},
'88%': {'background-position':'264px'},
'90%': {'background-position':'270px'},
'92%': {'background-position':'276px'},
'94%': {'background-position':'282px'},
'96%': {'background-position':'288px'},
'98%': {'background-position':'294px'},
'100%': {'background-position':'300px'}
}]);
$('.ledbar').playKeyframe({
name: 'shift',
duration: "4s",
timingFunction: 'linear',
delay: 0,
direction: 'reverse',
fillMode: 'forwards',
});
The oranje part moves over the green. The svg was drawn so that every rectangle was just 6px further than the other one.
this didn't work becouse of the smooth transition between two keyframes. This made the animation flicker. Maybe if the animation was in steps it would work but i don't know how this works and i thing there has to be a better way.
So i'm wondering how i could liniear shift the color of the svg in to an other color. I've looked at svg masks etc. but couldn't figuer it out.
This is the svg file, maybe its useful:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<g id="Button_2_-_Green">
</g>
<g>
<path fill="#80A993" d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path fill="#80A993" d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path fill="#80A993" d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path fill="#80A993" d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path fill="#80A993" d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path fill="#80A993" d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path fill="#80A993" d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path fill="#80A993" d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path fill="#80A993" d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path fill="#80A993" d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path fill="#80A993" d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path fill="#80A993" d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path fill="#80A993" d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path fill="#80A993" d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path fill="#80A993" d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path fill="#80A993" d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path fill="#80A993" d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path fill="#80A993" d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path fill="#80A993" d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path fill="#80A993" d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path fill="#80A993" d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path fill="#80A993" d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path fill="#80A993" d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path fill="#80A993" d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path fill="#80A993" d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path fill="#80A993" d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path fill="#80A993" d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path fill="#80A993" d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path fill="#80A993" d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path fill="#80A993" d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path fill="#80A993" d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path fill="#80A993" d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path fill="#80A993" d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path fill="#80A993" d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path fill="#80A993" d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path fill="#80A993" d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path fill="#80A993" d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path fill="#80A993" d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path fill="#80A993" d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path fill="#80A993" d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path fill="#80A993" d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path fill="#80A993" d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path fill="#80A993" d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path fill="#80A993" d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path fill="#80A993" d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path fill="#80A993" d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path fill="#80A993" d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path fill="#80A993" d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path fill="#80A993" d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path fill="#80A993" d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path fill="#80A993" d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path fill="#80A993" d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path fill="#80A993" d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path fill="#80A993" d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path fill="#80A993" d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path fill="#80A993" d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path fill="#80A993" d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path fill="#80A993" d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path fill="#80A993" d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path fill="#80A993" d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path fill="#80A993" d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path fill="#80A993" d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path fill="#80A993" d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path fill="#80A993" d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path fill="#80A993" d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path fill="#80A993" d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path fill="#80A993" d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path fill="#80A993" d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>
Here is one way to do it: with an animated linear gradient.
<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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
<linearGradient id="orange-grad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="orange"/>
<stop offset="0" stop-color="orange">
<animate attributeName="offset" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#80A993">
<animate attributeName="offset" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="1" stop-color="#80A993"/>
</linearGradient>
</defs>
<g fill="url(#orange-grad)">
<path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>
Update: How to manually trigger and reverse direction
Here I've used a different way of creating the graph. This variant uses a clipping path and slides an orange rect back and forth behind the clip. As requested by OP, I have added the ability to trigger the animation and switch directions by mousing over a couple of buttons.
This example uses vanilla Javascript and a timeout function for basic animation. If you wanted, you could switch to using a window.requestAnimationFrame() approach if there is a lot going on on your page and the animation doesn't run smoothly.
var graphPosition = 0;
var graphStep = 6;
var graphRunning = false;
var orangeRect = document.getElementById("orange");
document.getElementById("forwards").addEventListener("mouseenter", function() {
graphStep = 6;
startGraphRunning();
});
document.getElementById("backwards").addEventListener("mouseenter", function() {
graphStep = -6;
startGraphRunning();
});
function startGraphRunning()
{
// If already running, do nothing
if (graphRunning) return;
graphRunning = true;
// Perform the first step in the animation
animationStep();
}
function animationStep()
{
// Calculate new position of orang rectangle
var newPos = graphPosition += graphStep;
if (newPos < 0 || newPos > 408)
{
// Stop animation if we have reach min or max position
graphRunning = false;
}
else
{
// Update x position of orange rect
graphPosition = newPos;
// We want right hand edge of rectangle to be at "graphPosition",
// so we position rect at (graphPosition - rectangle-width)
orangeRect.setAttribute("x", graphPosition - orangeRect.width.baseVal.value);
}
// If animation is still running, call this function again in 50mS
if (graphRunning)
setTimeout(animationStep, 50);
}
div {
display: inline-block;
padding: 10px;
background-color: #eee;
border: solid 1px black;
margin: 20px 20px 0 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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
<clipPath id="graph">
<path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</mask>
</defs>
<g clip-path="url(#graph)">
<rect x="0" y="0" width="408" height="13" fill="green"/>
<rect x="-408" y="0" width="408" height="13" fill="orange" id="orange"/>
</g>
</svg>
<br />
<div id="forwards">Forwards</div>
<div id="backwards">Backwards</div>