Question

我正在努力让var(--primary-text-color);在: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>

Answer 1

不支持以这种方式使用CSS变量。

在您的HTML中，使用<style>元素投影<content>元素。这不适用于任意元素，仅适用于<dom-module>。

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

如果您只想对<path>元素进行着色，我认为唯一的方法是创建自定义图标元素（与https://github.com/PolymerElements/iron-icon/blob/master/iron-icon.html相同），只修改<style>标记并保留休息，因为它是

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

并使用

设置样式

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

如果您只想使用此颜色设置来设置所有SVG元素，那么您应该可以通过设置父组件中的<iron-icon>元素（不是自己尝试）来实现：

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

iron-iconset-svg和var（ - primary-text-color）;

1 个答案: