loadingSVG

予倾

已于 2023-09-26 21:07:29 修改

阅读量35

点赞数

分类专栏： js 文章标签： javascript 前端 html5

于 2022-11-16 19:24:59 首次发布

本文链接：https://blog.csdn.net/qz9420/article/details/127891547

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

// ==UserScript==
// @name         loading.io下载动态svg图片
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://loading.io/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const btn = document.createElement('button')
    btn.innerText = '下载当前SVG'
    btn.style = 'position: fixed;top: 90vh;right: 0;z-index：99999'
    document.body.appendChild(btn)
    btn.onclick = copySVG
    function copySVG() {
        // 正则匹配style-@keyframes id
        const reg = /running\s.+?;/g
        // 获取svg的innerHTML
        const svgStr = document.getElementsByClassName('inner')[2].innerHTML
        // 得到 running breath-e2285f69-fd29-4f44-b16a-9447336f09db; 类似数据
        const arr = svgStr.match(reg)
        // 如果没有使用@keyframes动画
        if(!arr) {
            let svgLabel = svgStr.replace(/\n/g, '')
            // navigator.clipboard.writeText(svgLabel)
            download("test.svg",svgLabel)
            console.log('无keyframes动画,下载成功！')
            // console.log(svgLabel)
        } else {
            // 获取@keyframes-id
            const idArr = arr.map(item => item.replace('running ','').replace(';',''))
            // 数组去重
            const noRepeat = [...new Set(idArr)]
            // 获取页面中的样式表
            const stylesObj = document.styleSheets;
            // 循环样式对象中的每一个数据
            Object.keys(stylesObj).forEach(k => {
            // 匹配svg中的@keyframes-id
                if(noRepeat.includes(stylesObj[k].ownerNode.id)) {
                    // @keyframes str去掉\n
                    let str1
                    const keyframes = stylesObj[k].ownerNode.innerHTML.replace(/\n/g, '')
                    const attr = '<?xml version="1.0" encoding="utf-8"?>'
                    str1 = attr + svgStr.replace(/\n/g, '').replace('<\/svg', '')+`<style id="${stylesObj[k].ownerNode.id}">`+ keyframes + '<\/style><\/svg>'
                    // navigator.clipboard.writeText(str1)
                    download("test.svg",str1)
                    console.log('有keyframes动画,下载成功！')
                    // console.log(str1)
                }
            })
        }
    }
    // 下载
    function download(filename, text) {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }
    // Your code here...
})();