svg中use标签使用样式

来源：互联网发布：淘宝店铺突然没流量编辑：程序博客网时间：2024/06/06 03:43

今天看到技术群中有人问svg中use元素可以设置样式属性不？因为他的symbol有200多种，但是只是颜色不一样。如果挨个定义，那svg文件就会很长。自己也思考过这个问题后来看到http://tympanus.NET/codrops/2015/07/16/styling-svg-use-content-css/这篇文章，收益匪浅。这篇文章讲的比较详细。就不在解释原理了。直接上自己测试例子的代码，比较直观。

1 单纯的svg文件，将style直接写在<svg>标签元素下

[html] view plain copy
本文转载：http://www.w3cplus.com/svg/styling-svg-use-content-css.html
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"  xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" height="2000">  
   <style type="text/css">  
     svg path {  
          fill: inherit;  
     }   
     .codrops-1 {  
        fill: #4BC0A5;  
        color: #A4DFD1;  
      }  
    .codrops-2 {  
      fill: #0099CC;  
       color: #7FCBE5;  
    }  
    .codrops-3 {  
       fill: #5F5EC0;  
       color: #AEAFDD;  
    }  
  </style>  
  <def>  
    <symbol id="codrops" viewBox="0 0 23 30">  
        <path class="back" fill="#aaa" d="M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0   c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43   c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33   c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895   c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263   c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313   c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z"/>  
        <path class="front" fill="#ddd" d="M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927   c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067   c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936   c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659 M6.177,5.966L6.177,5.966   c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203   c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z"/>  
    </symbol>  
  </def>  
  <use x="0" y="0" width="100" height="100" xlink:href="#codrops" class="codrops-1"/>  
  <use x="100" y="0" width="100" height="100"   xlink:href="#codrops" class="codrops-2"/>  
  <use x="200" y="0" width="100" height="100"  xlink:href="#codrops" class="codrops-3"/>  
</svg>  

2 如果用在Html中如下

[html] view plain copy
<!DOCTYPE html>  
<html>  
    <head>  
       <style type="text/css">  
        svg path {  
           fill: inherit;  
        }   
        use.codrops-1 {  
          fill: #4BC0A5;  
          color: #A4DFD1;  
        }  
        use.codrops-2 {  
         fill: #0099CC;  
         color: #7FCBE5;  
        }  
        use.codrops-3 {  
          fill: #5F5EC0;  
          color: #AEAFDD;  
        }  
      </style>  
   </head>  
      
   <body>  
       <div style="width:1000px;height:1000px;border:2px solid #F00;overflow-y:scroll;">  
        <svg style="display: none;">  
          <symbol id="codrops" viewBox="0 0 23 30">  
             <path class="back" fill="#aaa" d="M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0   c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43   c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33   c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895   c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263   c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313   c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z"/>  
             <path class="front" fill="#ddd" d="M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927   c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067   c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936   c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659 M6.177,5.966L6.177,5.966   c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203   c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z"/>  
          </symbol>  
        </svg>  
        <svg height="90px" width="69px">  
            <use xlink:href="#codrops" class="codrops-1"/>  
        </svg>  
        <svg height="90px" width="69px">  
            <use xlink:href="#codrops" class="codrops-2"/>  
        </svg>  
        <svg height="90px" width="69px">  
            <use xlink:href="#codrops" class="codrops-3"/>  
        </svg>  
        </div>  
    </body>  
</html>  

阅读全文

0 0