聚合物：在iron-iconset-svg中使用css-classes

Question

我試圖創建一個彩色的iron-icon-set。由於技術限制，我無法設置顏色iron-icon。

<link rel="import" href="../../iron-icon/iron-icon.html"> 
<link rel="import" href="../../iron-iconset-svg/iron-iconset-svg.html"> 
<iron-iconset-svg name="myiconset" size="24"> 
    <svg> 
    <style> 
     .green { 
      color: green; 
     } 
    </style> 
    <defs> 
     <g id="flag-red"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" style="color:red"/></g> 
     <g id="flag-green"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" class="green"/></g> 
    </defs> 
    </svg> 
</iron-iconset-svg> 

我想使用類重用多個圖標相同的顏色，而不是幾十個圖標重複相同style="color:XXX"。

當然，我很樂意使用已有的樣式，但從what I've read到目前爲止，這是行不通的，所以我根本沒有嘗試過。

然而：有沒有辦法在iron-iconset-svg內使用css-classes？

Answer 1

SVG不使用顏色CSS屬性，而是使用填充和筆畫。

<link rel="import" href="../../iron-icon/iron-icon.html"> 
 
<link rel="import" href="../../iron-iconset-svg/iron-iconset-svg.html"> 
 
<iron-iconset-svg name="myiconset" size="24"> 
 
    <svg> 
 
    <style> 
 
     .green { 
 
      fill: green; 
 
     } 
 
    </style> 
 
    <defs> 
 
     <g id="flag-red"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" style="fill:red"/></g> 
 
     <g id="flag-green"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" class="green"/></g> 
 
    </defs> 
 
    </svg> 
 
</iron-iconset-svg> 
 

 
<svg> 
 
    <use xlink:href="#flag-red"/> 
 
    <use transform="translate(50,0)" xlink:href="#flag-green"/> 
 
</svg>