前端系列——SVG Tag Builder 一个实用的项目标签构建工具

本文链接：https://blog.csdn.net/qq_51553982/article/details/129111074

前端系列——SVG Tag Builder 一个实用的项目标签构建工具

前端系列——SVG Tag Builder 一个实用的项目标签构建工具
- 示例
- 代码

前端系列——SVG Tag Builder 一个实用的项目标签构建工具

示例

很简单，我们直接输入名称、版本、以及设置出的颜色就可以直接生成了，注意颜色需要为16进制的颜色，若修改输入需要刷新一下
在这里插入图片描述
生成后选择下面的代码复制即可使用了，可以直接复制到HTML中或Markdown里

或者像是：

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #title {
   
   
        font-size: 82px;
        text-align: center;
        margin: 20px 0;
        font-family: 'Courier New', Courier, monospace;
      }
      #box {
   
   
        height: 40px;
        width: 90vw;
        margin: 20px;
      }
      .in {
   
   
        height: 32px;
        width: 400px;
        text-indent: 6px;

        outline: none;
      }
      #btn {
   
   
        cursor: pointer;
        background-color: #f08e3e;
        height: 48px;
        border-radius: 8px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 460px;
        margin: 20px;
        font-size: 18px;
        transition: all 0.45s ease-in-out;
      }
      #btn:hover {
   
   
        background-color: #f6801f;
      }
      #svg_wrap {
   
   
        height: 60px;
        width: 80vw;
        margin: 20px;
        border: 2px solid #f08e3e;
        padding: 30px;
      }
    </style>
  </head>
  <body>
    <div id="title">SVG Tag Builder</div>
    <div id="box">
      <span>名称:</span>
      <input type="text" placeholder="enter name" id="in1"