ポリマー：iron-iconset-svgでCSSクラスを使用

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クラスを使用する方法はありますか？

Answer 1

SVGはカラーCSSプロパティを使用しません。代わりに塗りと線を使用します。 CSS-スタイルのmissuseを補正するための感謝：返事が遅れて申し訳ありません

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