基本的SVG图标

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>

<div class="svg">
<svg viewBox="0 0 100 100">
<defs>
<g id="cross">
  <line x1="2" y1="2" x2="98" y2="98" />
  <line x1="98" y1="2" x2="2" y2="98" />
</g>  
  
<g id="hamburger">
  <line x1="2" y1="10" x2="98" y2="10" />
  <line x1="2" y1="50" x2="98" y2="50" />
  <line x1="2" y1="90" x2="98" y2="90" />
</g>

<g id="minus">
  <line x1="2" y1="50" x2="98" y2="50" />
</g>

<g id="plus">
  <line x1="50" y1="2" x2="50" y2="98" />
  <line x1="2" y1="50" x2="98" y2="50" />
</g>

<g id="search">
  <circle cx="40" cy="40" r="38"/>
  <line x1="67" y1="67" x2="98" y2="98" />
</g>

<g id="searchplus">
  <circle cx="40" cy="40" r="38"/>
  <line x1="40" y1="20" x2="40" y2="60" />
  <line x1="20" y1="40" x2="60" y2="40" />
  <line x1="67" y1="67" x2="98" y2="98" />
</g>

<g id="arrowup">
  <line x1="50" y1="2" x2="50" y2="98" />
  <line x1="50" y1="2" x2="98" y2="50" />
  <line x1="50" y1="2" x2="2" y2="50" />
</g>

<g id="arrowdown">
  <line x1="50" y1="2" x2="50" y2="98" />
  <line x1="50" y1="98" x2="98" y2="50" />
  <line x1="50" y1="98" x2="2" y2="50" />
</g>

<g id="arrowleft">
  <line x1="2" y1="50" x2="98" y2="50" />
  <line x1="2" y1="50" x2="50" y2="2" />
  <line x1="2" y1="50" x2="50" y2="98" />
</g>

<g id="arrowright">
  <line x1="2" y1="50" x2="98" y2="50" />
  <line x1="98" y1="50" x2="50" y2="2" />
  <line x1="98" y1="50" x2="50" y2="98" />
</g>

<g id="up">
  <line x1="50" y1="27" x2="98" y2="75" />
  <line x1="50" y1="27" x2="2" y2="75" />
</g>

<g id="down">
  <line x1="50" y1="73" x2="98" y2="25" />
  <line x1="50" y1="73" x2="2" y2="25" />
</g>

<g id="left">
  <line x1="27" y1="50" x2="75" y2="2" />
  <line x1="27" y1="50" x2="75" y2="98" />
</g>

<g id="right">
  <line x1="73" y1="50" x2="25" y2="2" />
  <line x1="73" y1="50" x2="25" y2="98" />
</g>
</defs>

<use class="plus use" href="#plus" x="0" y="0" />
    <use class="minus use" href="#minus" x="0" y="0" />
    <use class="cross use" href="#cross" x="0" y="0" />
    <use class="hamburger use" href="#hamburger" x="0" y="0" />
    <use class="search use" href="#search" x="0" y="0" />
    <use class="searchplus use" href="#searchplus" x="0" y="0" />
    <use class="arrowup use" href="#arrowup" x="0" y="0" />
    <use class="arrowdown use" href="#arrowdown" x="0" y="0" />
    <use class="arrowleft use" href="#arrowleft" x="0" y="0" />
    <use class="arrowright use" href="#arrowright" x="0" y="0" />
    <use class="up use" href="#up" x="0" y="0" />
    <use class="down use" href="#down" x="0" y="0" />
    <use class="left use" href="#left" x="0" y="0" />
    <use class="right use" href="#right" x="0" y="0" />

</svg>
</div>

<div class="buttons">
<button data-icon="plus" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#plus"></use>
  </svg>
</button>
<button data-icon="minus" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#minus"></use>
  </svg>
</button>
<button data-icon="cross" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#cross"></use>
  </svg>
</button> 
<button data-icon="hamburger" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#hamburger"></use>
  </svg>
</button>
<button data-icon="search" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#search"></use>
  </svg>
</button>
<button data-icon="searchplus" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#searchplus"></use>
  </svg>
</button>
<button data-icon="arrowup" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#arrowup"></use>
  </svg>
</button>
<button data-icon="arrowdown" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#arrowdown"></use>
  </svg>
</button>
<button data-icon="arrowleft" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#arrowleft"></use>
  </svg>
</button>
<button data-icon="arrowright" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#arrowright"></use>
  </svg>
</button>
<button data-icon="up" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#up"></use>
  </svg>
</button>
<button data-icon="down" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#down"></use>
  </svg>
</button>
<button data-icon="left" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#left"></use>
  </svg>
</button>
<button data-icon="right" class="btn">
  <svg class="btnSvg" viewBox="0 0 100 100">
    <use xlink:href="#right"></use>
  </svg>
</button>
</div>
<div class="code">
  <button class="copy">copy</button>
  <pre>
  </pre>
</div>

css

html { 
  height: 100%; 
  background: #1A2A3A;  
  color: #FFF; 
}
body {
  font-family: Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}
.svg {
  border-radius: 50% 50%;
  padding:  0px;
  width: 50vmin;
  height:50vmin;
  background: #0D47A1;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg { 
  width: 50%;
  height:50%;
  stroke:#B0BA23;
  stroke-width:4;
  stroke-linecap: round;
  fill:none;
}
.btnSvg {
  width:20px;
  height:20px;
   stroke-width:10;
}
svg .use {
  opacity: 0;
  transform: scale(.8) rotate(.5turn);
  transform-origin: center center;
  transition: all .5s ease; 
}
svg .use.active {
 
  opacity: 1;
  transform: scale(1);
  transition: all .5s ease; 
  transition-delay: .2s;
}
.buttons {
 margin-top: 10vh; 
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-grow: 1;
}
button {
  border:0;
  background: #0D47A1;
  height: 30px;
  width: 30px;
  color: #fff;
  cursor:pointer;
  border-radius: 3px;
  margin: 2px;
  display:flex;
  justify-items:center;
  align-items:center;
}
.code {
  background-color: #7986CB;
  margin-top:5vh;
    min-width: 80vw;
  border-radius: 5px;
  position:relative;
}
.code pre {
  padding:10px;
}

button.copy {
  position:absolute;
  width:auto;
  height:auto;
  padding: 10px 15px;
  right:0px;
  top:0px;
}

.dwf {
  position:absolute;
  bottom:4px;
  right:10px;
}

JavaScript

var btns = Array.from(document.querySelectorAll(".btn"));
var codeBox = document.querySelector(".code pre"); 
var copyBtn = document.querySelector(".copy"); 
setState('cross');

copyBtn.addEventListener('click', (e) => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(codeBox);
  selection.removeAllRanges();
  selection.addRange(range);
  try {
    document.execCommand('copy');
    selection.removeAllRanges();
  } catch(e) {
    alert('Copy not working use Strg-C instead');
  }
});

btns.forEach( (btn) => {
    btn.addEventListener('click', (e)=>{
    var activeIcon = document.querySelector(".use.active");  
    activeIcon.classList.remove("active");
    setState(btn.dataset.icon);
  });
});

function setState(iconName) {
  var icon = document.querySelector('.'+iconName);
  var code = document.querySelector('#'+iconName);
  icon.classList.add('active');
  console.dir(codeBox);
  codeBox.innerText = "<svg class='" + iconName + "' viewBox='0 0 100 100'>\n" + code.outerHTML + "\n</svg>";
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>基本的SVG图标-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号