javascript - 如何将 svg 按钮变成下载按钮?
问题描述
有没有办法将一个已经预制的 SVG 按钮变成一个下载按钮。目的是单击按钮,制作动画,然后下载 pdf。我试图将按钮包装在<a href>
标签中,但这只会导致一个不可见的区域单击以转到网站弹出。我也尝试将download
属性应用于它,但我不熟悉它。
该按钮的代码如下。
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>
解决方案
Add window.location.href
behind 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
});
推荐阅读
- python - 输入类型不支持 ufunc 'true_divide',并且输入无法安全地强制转换为任何支持的类型错误
- python - 如何使用熊猫计算另一列中每个值在一列中出现的次数?
- python - 如何计算频带的平均值(mu,8-13Hz)?
- asp.net-core - DI 多个 OpenId 提供程序 - 未为匿名路由注入用户身份
- python - 在 Python 中使用自定义距离函数对任意对象进行聚类
- amazon-web-services - 来自纯标准输入的 sam 本地调用
- algorithm - 允许向左、向右、向下和向上移动的最小成本路径
- google-cloud-platform - 为具有 pubsub 目标的 google-sink 预定义服务帐户
- media-player - Unreal Engine 4 nDisplay 第二屏无法渲染媒体纹理
- r - 使密度和直方图y轴的底部对齐?