<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="leaflet"></div>
<script type="text/javascript" src="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var map = new L.Map('leaflet', {
'center': [0, 0],
'zoom': 0,
'zoomControl': false,
'doubleClickZoom': false,
'scrollWheelZoom': true,
'layers': [
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
})
]
});
var group = new L.FeatureGroup([
L.circle([0, -55], 2750000),
L.rectangle([[-25,-25],[25,25]]),
L.polyline([[-25,35],[25,80]])
]).addTo(map)
map.fitBounds(group.getBounds())
group.on('click', function (e) {
var path = e.layer._path.getAttribute('d').replace(/L/g, ', ');
var image = new Image()
image.src = 'icon.svg';
image.style.offsetPath = 'path("' + path + '")';
image.classList.add('motion');
map.getPanes().markerPane.appendChild(image);
});
body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}
@keyframes offset {
0% { offset-distance: 0; }
100% { offset-distance: 100%; }
}
.motion {
position: absolute;
transform: rotate(90deg);
width: 32px;
height: 32px;
will-change: transform;
animation-name: offset;
animation-play-state: running;
animation-delay: 2s;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
animation-fill-mode: none;
}
<?xml version="1.0" encoding="iso-8859-1"?>
<!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="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 182.464 182.464" style="enable-background:new 0 0 182.464 182.464;" xml:space="preserve">
<path d="M169.31,45.133l-17.263-1.936c0.003-0.108,0.019-0.214,0.019-0.323v-8.598c0-6.056-4.848-7.552-9-7.922v-4.122
c0-0.082-0.019-0.158-0.024-0.238c17.786-0.057,17.791-0.546,17.791-2.09c0-1.651,0-2.096-21.761-2.096s-21.761,0.444-21.761,2.096
c0,1.572,0.015,2.05,18.78,2.092c-0.005,0.079-0.024,0.155-0.024,0.236v4.085c-3.898,0.293-8,1.648-8,7.959v6.231l-8.408-0.943
c-2.977-0.331-6.979-0.667-11.035-0.919c-1.823-15.464-6.264-35.414-17.046-35.414h-0.687c-10.774,0-15.217,19.947-17.042,35.448
c-3.875,0.244-7.637,0.557-10.38,0.859l-8.401,0.939v-6.201c0-6.029-4.105-7.539-8-7.918v-4.127c0-0.082-0.019-0.158-0.024-0.238
c17.778-0.057,17.783-0.546,17.783-2.09c0-1.651,0-2.096-21.761-2.096s-21.761,0.444-21.761,2.096c0,1.572,0.015,2.05,18.787,2.092
c-0.005,0.079-0.024,0.155-0.024,0.236v4.082c-4.13,0.285-9,1.625-9,7.963v8.598c0,0.096,0.012,0.19,0.015,0.286l-17.919,2.004
C6.621,45.885,0,49.016,0,53.607c0,4.517,6.372,8.518,12.302,10.326l19.342,5.815c-0.275,1-0.434,2.047-0.434,3.132
c0,6.536,5.317,11.854,11.853,11.854c5.865,0,10.735-4.286,11.676-9.887c2.647,0.25,5.139,0.385,7.169,0.385h11.694
c1.148,17.625,3.393,44.289,7.333,64.46c0.174,0.893,0.354,1.949,0.537,3.106c-11.293,0.931-23.509,3.618-23.509,9.724
c0,6.611,14.318,9.215,26.281,9.92c2.124,14.184,3.37,16.79,6.365,16.79h1.245c2.994,0,4.24-2.604,6.363-16.779
c11.999-0.69,26.457-3.287,26.457-9.931c0-6.138-12.34-8.821-23.681-9.739c0.182-1.146,0.36-2.193,0.533-3.079
c3.937-20.144,6.182-46.802,7.332-64.473h12.094c1.846,0,4.072-0.111,6.452-0.321c0.967,5.57,5.824,9.823,11.666,9.823
c6.536,0,11.853-5.317,11.853-11.854c0-1.017-0.142-1.998-0.384-2.94l19.646-5.865c6.102-1.878,12.278-6.056,12.278-10.407
C182.464,49.024,175.845,45.859,169.31,45.133z"/>
</svg>