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属性，而是使用填充和描边。

＆＃13;

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

＆＃13;

聚合物：在iron-iconset-svg

1 个答案: