aplicar una funcion a objetos en el documento HTML

[aado29]

Hey como estan? mi problema es que quiero activar esta funcion:

Código HTML:

<script>
			var loader = document.getElementById('la-anim-loader');
			var border = document.getElementById('la-anim-border');
			var α = 0;
			var π = Math.PI;
			var t = 15;
			var tdraw;
			var inProgress = false;

			function PieDraw() {
				α++;
				α %= 360;
				var r = ( α * π / 180 )
				var x = Math.sin( r ) * 250
				var y = Math.cos( r ) * - 250
				var mid = ( α > 180 ) ? 1 : 0
				var anim = 'M 0 0 v -250 A 250 250 1 ' + mid + ' 1 ' +  x  + ' ' +  y  + ' z';

				loader.setAttribute( 'd', anim );
				border.setAttribute( 'd', anim );
				var por = Math.floor((α*100)/360);
				document.getElementById('porcent').innerHTML=por+"%";
				var el = document.querySelector('.la-anim > svg');
				var anim = el.getAttribute('data-por');
				var grados = (anim*360)/100;
				if( α < grados )
				tdraw = setTimeout(PieDraw, t); // Redraw
			}

			function PieReset() {
				clearTimeout(tdraw);
				var anim = 'M 0 0 v -250 A 250 250 1 0 1 0 -250 z';
				loader.setAttribute( 'd', anim );
				border.setAttribute( 'd', anim );
			}

			$(document).on( 'scroll', function() {
				if ($(document).scrollTop()===($(document).height()-$(window).height())){
					if( inProgress ) {return false};
					inProgress = true;
					PieDraw();
				}
			});
		</script> 

a varios objetos en mi HTML como estos:

Código HTML:

<div class="la-anim">
				<svg data-por="75" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewbox="0 0 500 500">
					<path id="la-anim-border" transform="translate(250, 250)"/>
					<path id="la-anim-loader" transform="translate(250, 250) scale(0.65)"/>
				</svg>
			</div> 

solo consigo activarlo