uutool.cn在线SVG预览功能增强
// ==UserScript==
// @name uutool.cn在线SVG预览功能增强
// @namespace https://scriptcat.org/zh-CN/script-show-page/3089
// @version 0.2
// @description 增强SVG预览界面样式及交互功能
// @author beibeibeibei
// @license MIT
// @match https://uutool.cn/svg-preview/
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 节流函数
function throttle(func, limit = 300) {
let lastFunc;
let lastRan;
return function(...args) {
const context = this;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
// 样式注入
function injectCustomStyles() {
const style = document.createElement('style');
style.classList.add("beibeibeibei");
document.head.appendChild(style);
// 添加样式规则
const css = `
/*背景颜色*/
body {
background: black;
}
/*让左侧导航展开收起按钮更明显*/
.left-nav .left-nav-collapse,
.left-nav .left-nav-open {
filter: drop-shadow(1px 0px 0px black);
}
/*左侧导航暗色*/
.left-nav {
background: #090805 !important;
}
.left-nav span,
.left-nav li a {
color: #CCC !important;
}
/*左侧导航收起*/
body.left-nav-collapse .left-nav {
background: none !important;
width: 20px;
}
/*左侧导航按钮悬浮效果*/
.left-nav li:hover {
background: #12367d !important;
}
/*滚动条*/
::-webkit-scrollbar-thumb {
background-color: #ffffff66 !important;
}
/*工具介绍*/
.tool-intro {
background: black !important;
}
/*footer*/
footer {
background: black !important;
}
/*搜索框*/
#searchInput {
background: black !important;
border: 1px solid white;
color: white;
}
/*title*/
.tool-meta {
background: black !important;
padding: 2px 18px;
}
/*svg代码文字背景*/
textarea {
background: black !important;
color: white;
transform-origin: 0 0;
}
/*textarea隐藏*/
textarea.hideTextarea {
position: absolute;
z-index: -1;
scale: 0.1;
transform-origin: 0 0;
}
/*svg*/
svg {
display: block;
}
/*滑块按钮*/
input[type=range] {
-webkit-appearance: none;
border-radius: 1em;
}
input[type=range]:focus {
outline: 1px solid gray;
}
input[type=range]::-webkit-slider-runnable-track {
height: 1em;
background: #d9d9d9;
border-radius: 1em;
}
input[type=range]::-webkit-slider-thumb {
height: 1em;
width: 1em;
border-radius: 50%;
background: #8c8c8c;
cursor: pointer;
-webkit-appearance: none;
}
/*设置背景输入框*/
input.beibeibeibei-background-input:focus {
outline: none;
border-color: black !important;
}
/*示例按钮hover*/
button.beibeibeibei-exampleBtn:hover {
background: #409EFF;
color: white;
}
/*隐藏按钮hover*/
button.beibeibeibei-hideBtn:hover {
background: #409EFF;
color: white;
}
`.replace(/\n/g, ' '); // 去掉换行符;
// 将样式规则写入style标签
style.innerText = css;
}
/*添加滑块控制展示区域大小*/
function createZoomController() {
// 选择目标SVG元素
function getSvgElements() {
const svgElement = document.querySelectorAll('svg');
return svgElement;
}
// 创建滑块元素
const slider = document.createElement('input');
slider.classList.add("beibeibeibei-slider");
slider.type = 'range';
slider.min = 1; // 最小宽度百分比
slider.max = 100; // 最大宽度百分比
slider.value = '100';
slider.title = "svg宽度百分比滑块";
slider.style.width = '300px';
slider.style.display = "block";
// label
const label = document.createElement('div');
label.textContent = "svg宽度百分比滑块";
label.style.fontSize = "12px";
// 将滑块和标签添加到页面
const container = document.createElement('div');
container.appendChild(slider);
container.appendChild(label);
container.style.display = 'inline-block';
container.style.verticalAlign = "middle";
container.style.border = '1px solid #d3d4d6';
container.style.borderRadius = "4px";
container.style.padding = "2px";
container.style.marginRight = "10px";
container.style.transform = 'translateY(-1px)';
document.querySelector(".btn-box").appendChild(container);
// 更新SVG宽度函数
function updateSvgWidth(value) {
let svgs = getSvgElements();
svgs.forEach((svg) => {
svg.style.width = value + '%';
});
}
// 监听滑块输入事件
slider.addEventListener('input', function(e) {
updateSvgWidth(e.target.value);
});
// 修改背景输入框
const background_input = document.createElement('input');
background_input.placeholder="双击输入框";
background_input.classList.add("beibeibeibei-background-input");
background_input.title = '设置svg背景, 试试双击输入框自动输入: \'linear-gradient(#ffe,#adf)\'';
background_input.style.borderRadius = '4px';
background_input.style.border = '1px solid #DCDFE6';
background_input.style.marginRight = '10px';
background_input.style.padding = '11px 20px';
background_input.style.fontSize = '14px';
document.querySelector(".btn-box").appendChild(background_input);
function handleBackgroundInput(e) {
document.querySelector("#svgBox").style.background = e.target.value;
}
// 事件监听器,节流
background_input.addEventListener('input', throttle(handleBackgroundInput));
background_input.addEventListener('dblclick', (e) => {
e.target.value += "linear-gradient(#ffe,#adf)";
// 主动触发 input 事件
const event = new Event('input', {'bubbles': true,'cancelable': true});
e.target.dispatchEvent(event);
});
/*示例按钮*/
const exampleBtn = document.createElement('button');
exampleBtn.classList.add("beibeibeibei-exampleBtn");
exampleBtn.textContent = '生成svg文本';
exampleBtn.addEventListener('click', (e) => {
document.querySelector('textarea').value += `<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">\n` +
` <!-- 直线 -->\n` +
` <line x1="10" y1="10" x2="100" y2="100" stroke="purple" stroke-width="3"/>\n` +
`\n` +
` <!-- 矩形 -->\n` +
` <rect x="120" y="20" width="100" height="60" fill="lightblue" stroke="blue" stroke-width="2"/>\n` +
`\n` +
` <!-- 圆形 -->\n` +
` <circle cx="300" cy="50" r="40" fill="lightgreen" stroke="green" stroke-width="2"/>\n` +
`\n` +
` <!-- 椭圆 -->\n` +
` <ellipse cx="60" cy="150" rx="50" ry="30" fill="lightcoral" stroke="coral" stroke-width="2"/>\n` +
`\n` +
` <!-- 多边形 -->\n` +
` <polygon points="220,150 185,198 130,179 130,121 185,102" fill="none" stroke="red" stroke-width="2"/>\n` +
`\n` +
` <!-- 文本 -->\n` +
` <text x="250" y="155" font-family="Arial" font-size="16" fill="black">\n` +
` 示例SVG图形\n` +
` </text>\n` +
`</svg>\n` +
`\n`;
const event = new Event('input', {'bubbles': true,'cancelable': true});
document.querySelector('textarea').dispatchEvent(event);
});
document.querySelector(".btn-box").appendChild(exampleBtn);
/*隐藏textarea按钮*/
const hideBtn = document.createElement('button');
hideBtn.classList.add("beibeibeibei-hideBtn");
hideBtn.textContent = '隐藏文本框';
hideBtn.addEventListener('click', (e) => {
document.querySelector('textarea').classList.toggle("hideTextarea");
});
document.querySelector(".btn-box").appendChild(hideBtn);
}
// 初始化函数
function init() {
if (!document.querySelector("style.beibeibeibei")) {
injectCustomStyles();
}
// 创建缩放控制器
createZoomController();
}
// DOM加载完成
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();