Polymer iron iconset svg和var（--主文本颜色）；

我正在尝试获取

var（--主文本颜色）在
：root{}
中定义的工作。每个元素都会更新，除了在另一个元素中导入的自定义图标集，我需要硬编码它来定义颜色

<link rel="import" href="../../bower_components/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="gender-icons" size="75">
    <svg viewBox="0 0 75 75">
        <style>
            path {
                color: white;
                /*var(--primary-text-color);*/
                stroke: white;
                /*var(--primary-text-color);*/
            }
        </style>
        <defs>
            <g id="female" transform="translate(-348.7552,-478.0905)">
            <g id="g3773" transform="matrix(1.071197,0,0,1.075147,-13.30677,-36.99488)">
                <path
                d="M 176 33 A 11 11 0 1 1  154,33 A 11 11 0 1 1  176 33 z"
                transform="matrix(1.540096,0,0,1.5384,118.8893,454.0543)"
                style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
                id="path3939" />
                <path
                d="M 373.00525,521.74399 L 373.00525,543.28159"
                style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke-width:4.61774349;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                id="path3941" />
                <path
                d="M 363.76467,534.05119 L 382.24582,534.05119"
                style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke-width:4.61774349;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                id="path4816" />
            </g>
            </g>
            <g id="male" transform="translate(-348.7552,-478.0905)">
            <g id="g1872" transform="matrix(1.948116,0,0,1.937312,-342.4303,-460.0101)">
                <path
                d="M 387.95009,489.60348 L 378.66214,498.89143"
                style="opacity:1;fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
                id="path26867" />
                <path
                d="M 49.396475 36.70454 A 15.623922 16.319134 0 1 1  18.14863,36.70454 A 15.623922 16.319134 0 1 1  49.396475 36.70454 z"
                transform="matrix(0.48802,0.48802,-0.467594,0.467594,371.6094,473.1357)"
                style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke-width:4.44071579;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"
                id="path26871" />
                <path
                d="M 379.92823,489.70212 C 387.842,489.70212 387.842,489.70212 387.842,489.70212 L 387.842,497.61589"
                style="fill:none;fill-rule:evenodd;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                id="path27759" />
            </g>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>


路径{
颜色：白色；
/*var（--主文本颜色）*/
笔画：白色；
/*var（--主文本颜色）*/
}
不支持以这种方式使用CSS变量

在HTML中，使用
元素投影
元素。
这不适用于任意元素，仅适用于

<dom-module id="xxx">
  <template>
    <style>
      ...
    </style>
  </template>
</dom-module>


...

如果只想给元素上色，我认为唯一的方法是创建自定义图标元素（与相同），在这里只修改
标记，其余部分保持原样

  <style>
    :host {
      @apply(--layout-inline);
      @apply(--layout-center-center);
      position: relative;
      vertical-align: middle;
      fill: var(--iron-icon-fill-color, currentcolor);
      stroke: var(--iron-icon-stroke-color, none);
      width: var(--iron-icon-width, 24px);
      height: var(--iron-icon-height, 24px);

      path {
        color: var(--gender-icon-color);
        stroke: var(--gender-icon-stroke);
      }
    }
  </style>


：主持人{
@应用（--布局内联）；
@应用（--布局中心）；
位置：相对位置；
垂直对齐：中间对齐；
填充：var（--铁图标填充颜色，currentcolor）；
笔划：var（--铁图标笔划颜色，无）；
宽度：var（--铁图标宽度，24px）；
高度：var（--铁图标高度，24px）；
路径{
颜色：var（--性别图标颜色）；
笔划：var（--性别图标笔划）；
}
}

并使用

<head>
  <style is="custom-style"> 
    :root {
      --gender-icon-color: white;
      --gender-icon-stroke: white;
    }


：根{
--性别图标颜色：白色；
--性别图标笔划：白色；
}

如果您只想使用此颜色设置设置所有SVG元素的样式，那么您应该能够通过设置父组件中
元素的样式来实现（我自己没有尝试过）：


铁偶像{
--铁图标填充颜色：var（--主文本颜色）；
--铁图标笔划颜色：var（--主文本颜色）；
}

<dom-module id="my-element">
  <template>
    <style> 
      iron-icon.gender {
         --iron-icon-fill-color: var(--primary-text-color);
         --iron-icon-stroke-color: var(--primary-text-color);
      }
    </style>
  </template>
<dom-module>