svg中use标签使用样式

  


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

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

        

[html]  view plain  copy
  1. 本文转载:http://www.w3cplus.com/svg/styling-svg-use-content-css.html
  2. <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"  xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" height="2000">  
  3.    <style type="text/css">  
  4.      svg path {  
  5.           fill: inherit;  
  6.      }   
  7.      .codrops-1 {  
  8.         fill: #4BC0A5;  
  9.         color: #A4DFD1;  
  10.       }  
  11.     .codrops-2 {  
  12.       fill: #0099CC;  
  13.        color: #7FCBE5;  
  14.     }  
  15.     .codrops-3 {  
  16.        fill: #5F5EC0;  
  17.        color: #AEAFDD;  
  18.     }  
  19.   style>  
  20.   <def>  
  21.     <symbol id="codrops" viewBox="0 0 23 30">  
  22.         <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"/>  
  23.         <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"/>  
  24.     symbol>  
  25.   def>  
  26.   <use x="0" y="0" width="100" height="100" xlink:href="#codrops" class="codrops-1"/>  
  27.   <use x="100" y="0" width="100" height="100"   xlink:href="#codrops" class="codrops-2"/>  
  28.   <use x="200" y="0" width="100" height="100"  xlink:href="#codrops" class="codrops-3"/>  
  29. svg>  
     2  如果用在Html中如下

    

[html]  view plain  copy
  1. >  
  2. <html>  
  3.     <head>  
  4.        <style type="text/css">  
  5.         svg path {  
  6.            fill: inherit;  
  7.         }   
  8.         use.codrops-1 {  
  9.           fill: #4BC0A5;  
  10.           color: #A4DFD1;  
  11.         }  
  12.         use.codrops-2 {  
  13.          fill: #0099CC;  
  14.          color: #7FCBE5;  
  15.         }  
  16.         use.codrops-3 {  
  17.           fill: #5F5EC0;  
  18.           color: #AEAFDD;  
  19.         }  
  20.       style>  
  21.    head>  
  22.       
  23.    <body>  
  24.        <div style="width:1000px;height:1000px;border:2px solid #F00;overflow-y:scroll;">  
  25.         <svg style="display: none;">  
  26.           <symbol id="codrops" viewBox="0 0 23 30">  
  27.              <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"/>  
  28.              <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"/>  
  29.           symbol>  
  30.         svg>  
  31.         <svg height="90px" width="69px">  
  32.             <use xlink:href="#codrops" class="codrops-1"/>  
  33.         svg>  
  34.         <svg height="90px" width="69px">  
  35.             <use xlink:href="#codrops" class="codrops-2"/>  
  36.         svg>  
  37.         <svg height="90px" width="69px">  
  38.             <use xlink:href="#codrops" class="codrops-3"/>  
  39.         svg>  
  40.         div>  
  41.     body>  
  42. html>  

你可能感兴趣的:(svg中use标签使用样式)