SVG小记——SVG Sprites

来源：互联网发布：ubuntu安装chrome 编辑：程序博客网时间：2024/05/01 18:46

<!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>

使用<symbol>元素不仅仅更加地语义化，至少在我的例子中，我们还可以避免<svg>元素上的viewbox属性的重复出现。
另外我们现在还可以把之前移除的title和desc元素放回来，用他们来提高我们图标的可访问性。

0 0