css SVG Sprite

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css SVG Sprite相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>SVG Sprites</title>
  </head>
  <body>
  
    <svg class="icon">
        <use xlink:href="sprite.svg#facebook"></use>
    </svg>
    
    <svg class="icon">
        <use xlink:href="sprite.svg#twitter"></use>
    </svg>
  
  </body>
</html>

<svg display="none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="facebook" viewBox="0 0 49.652 49.652">
    <g>
      <path d="M24.826,0C11.137,0,0,11.137,0,24.826c0,13.688,11.137,24.826,24.826,24.826c13.688,0,24.826-11.138,24.826-24.826
        C49.652,11.137,38.516,0,24.826,0z M31,25.7h-4.039c0,6.453,0,14.396,0,14.396h-5.985c0,0,0-7.866,0-14.396h-2.845v-5.088h2.845
        v-3.291c0-2.357,1.12-6.04,6.04-6.04l4.435,0.017v4.939c0,0-2.695,0-3.219,0c-0.524,0-1.269,0.262-1.269,1.386v2.99h4.56L31,25.7z
        "/>
    </g>
  </symbol>

  <symbol id="twitter" viewBox="0 0 612 612">
    <g>
      <path d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411
        c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513
        c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101
        c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104
        c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194
        c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485
        c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"/>
    </g>
  </symbol>
</svg>

.icon {
  fill: red;
}

.icon:hover {
  fill: green;
}

以上是关于css SVG Sprite的主要内容，如果未能解决你的问题，请参考以下文章

css SVG Sprite

Safari中的SVG Fragment Sprite + CSS背景图像

你知道SVG Sprites是什么吗，还在用css sprite就太low了

SVG Use(转）

如何在带有ruby on rails的伪元素中显示来自svg sprite的图标