SVG小记——SVG Sprites

最新推荐文章于 2024-08-10 07:42:47 发布

se7en灬柒柒

最新推荐文章于 2024-08-10 07:42:47 发布

阅读量451

点赞数

分类专栏： svg 文章标签： svg

svg 专栏收录该内容

5 篇文章

订阅专栏

<!doctype html>
<html lang="en">
  <head>
      <meta charset="utf-8" />
      <title>David Darnes - Web Designer &amp; Front-end Developer</title>
      <style>
      .icon {
            max-width: 40px;
            max-height: 40px;}
      </style>
      <svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <symbol id="icon1" fill="#55ACEE">
              <title>icon1</title>
              <desc>icon1</desc>
              <path d="..." id="bird"></path>
          </symbol>
          <symbol id="icon2">
              <title>icon2</title>
              <desc>icon2</desc>
              <path d="..." id="ball" fill="#EA4C89"></path>
              <path d="..." id="ball-lines" fill="#C32361"></path>
          </symbol>
          <symbol id="icon3" fill="#161614">
              <title>icon3</title>
              <desc>icon3</desc>
              <path d="..." id="octocat"></path>
          </symbol>
      </svg>
  </head>
  <body>
      <div class="section">
       <a href="#">
           <svg class="icon" viewBox="0 0 50 41">
               <switch>
                   <use xlink:href="#icon1"></use>
                   <foreignObject>
                       <img class="icon" src="img/icon1.png" alt="Twitter">
                   </foreignObject>
               </switch>
           </svg>
       </a>
       <a href="#">
           <svg class="icon" viewBox="0 0 50 50">
               <switch>
                   <use xlink:href="#icon2"></use>
                   <foreignObject>
                       <img class="icon" src="img/icon2.png" alt="Dribbble">
                   </foreignObject>
               </switch>
           </svg>
       </a>
       <a href="#">
           <svg class="icon" viewBox="0 0 50 50">
               <switch>
                   <use xlink:href="#icon3"></use>
                   <foreignObject>
                       <img class="icon" src="img/icon3.png" alt="GitHub">
                   </foreignObject>
               </switch>
           </svg>
       </a>
    </div>
</body>