CODEWITHSUNDEEP
javascripthtmlcsssvg
Jake Shelly Paul
Jake Shelly Paul

Reputation: 13

How to turn an svg button into a download button?

Is there anyway to make an already premade SVG button into a download button. The aim is to click the button, do the animation and then download a pdf. I have tried to wrap the button in <a href> tags but that just caused an invisible area to click to go to the website to pop up. I have tried to apply the download attribute to it as well but I am not familiar with it.

The code for the button is below. 

var path = document.getElementById("path");
var arrow = document.getElementById("arrow");
var base = document.getElementById("base");
var baseTop = base.getBBox().y - parseInt(window.getComputedStyle(base).getPropertyValue("stroke-width"))/2;
var morphTo = "m13,102 h15.2 c2.4,0 4.8,0.9 6.6,2.5 l8.5,7.6 c3.8,3.4 9.5,3.4 13.3,0 l8.5-7.6 c1.8-1.6 4.2-2.5 6.6-2.5 h15.2".match(/([MLHVCSQTA]+)|(-?[\d\.]+)z?/gi);
var morphFrom = base.getAttribute("d").match(/([MLHVCSQTA]+)|(-?[\d\.]+)z?/gi);


function getPathPosition(counter, path) {
  return path.getPointAtLength(path.getTotalLength() * counter).y;
}

function movePath(element, path, amount) {
  element.setAttribute("transform", "translate(0," + (getPathPosition(amount, path) - path.getBBox().y) +")");
}

function morph(element, from, to, amount) {
  if (from.length !== to.length) {
    console.error("From path and to path need to have the same number of points");
  }
  var adjusted = to.map(function(item, i){
    return (isNaN(item) || item === from[i]) ? item : item * amount;
  });
  element.setAttribute("d",adjusted.join(" "));
}

function animate(t, counter, counterBase, reverse, increment, incrementBase) {
  
  if (getPathPosition(counter, path) >= baseTop && incrementBase === 0) {
    incrementBase = increment/(1 - counter);
  }
  
  if (counter >= 1) {
    reverse = true;
  } else if ( reverse && counter <= 0 ) {
    return false;
  }
  
  if (reverse) {
    counter -= increment;
    counterBase -= incrementBase;
  } else {
    counter += increment; 
    counterBase += incrementBase; 
  }
  
  if (counterBase >= 0) {
    morph(base, morphFrom, morphTo, counterBase);
  }
  
  movePath(arrow, path, counter);
  requestAnimationFrame(function(){
    animate(t, counter, counterBase, reverse, increment, incrementBase);
  });
}


document.getElementById("download").addEventListener("click", function() {
  animate(0, 0, 0, false, 0.08, 0)
});
.download-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.download-btn {
  width: 50px;
}

.download-arrow,
.download-base {
  fill:none;
  stroke-width:10;
  stroke-linecap:round;
}
.download-base {
  stroke:rebeccapurple;
}
.download-arrow {
  stroke:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="download-container">
  <svg version="1.1" id="download" class="download-btn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 125" style="enable-background:new 0 0 100 125;" xml:space="preserve">
    
  		<path id="path" d="M80,85 L80,110" />
  <path d="m13,102 h15.2 c2.4,0 4.8,0 6.6,0 l8.5,0 c3.8,0 9.5,0 13.3,0 l8.5,0 c1.8,0 4.2,0 6.6,0 h15.2" id="base" class="download-base"/>
    
  <g id="arrow" class="download-arrow"><line x1="50" y1="20.4" x2="50" y2="80.6"/><line x1="50" y1="80.6" x2="71.4" y2="59.2"/><line x1="50" y1="80.6" x2="28.6" y2="59.2"/></g>
  </svg>

Upvotes: 0

Views: 264

Answers (2)

Amoyensis
Amoyensis

Reputation: 191

Add window.location.hrefbehind the event animation. 

document.getElementById("download").addEventListener("click", function() {
  animate(0, 0, 0, false, 0.08, 0);
  window.location.href="http://www.google.com";//Your download URL
});

Upvotes: 2

Harikesh
Harikesh

Reputation: 158

You can redirect to the required download URL after the animation is performed using
window.location = "http://www.yoururl.com"; Try adding this line in the click event listener function.

Upvotes: 0

Related Questions