代码之家 › 专栏 › 技术社区 › Jack

CSS选择阴影根

svg css html

Jack · 技术社区 · 4 年前

fill 右下角的圆圈变成绿色。

下面的代码片段成功地将整个形状染成了绿色,但我只想将形状的一部分(只是圆)染成绿色。

    [row="2"] [col="b"] {fill: green;}

<svg>

  <defs>
    <symbol id="myShape">
      <polygon points="0,0 40,0 20,20" />
      <circle r="10" cx="10" cy="10" stroke="black" />
    </symbol>
  </defs>

  <g row="1" translate="transform(0,0)">
    <use col="a" xlink:href="#myShape" x="0" />
    <use col="b" xlink:href="#myShape" x="50" />
  </g>

  <g row="2" transform="translate(0,50)">
    <use col="a" xlink:href="#myShape" x="0" />
    <use col="b" xlink:href="#myShape" x="50" />
  </g>

</svg>

1 回复 | 直到 4 年前

Robert Longson 4 年前

如果您希望某个颜色始终是特定的,请将其显式设置为该颜色。

    [row="2"] [col="b"] {fill: green;}
    [row="1"] [col="b"] {fill: blue;}

<svg>

  <defs>
    <symbol id="myShape">
      <polygon points="0,0 40,0 20,20" fill="black" />
      <circle r="10" cx="10" cy="10" stroke="black" />
    </symbol>
  </defs>

  <g row="1" translate="transform(0,0)">
    <use col="a" xlink:href="#myShape" x="0" />
    <use col="b" xlink:href="#myShape" x="50" />
  </g>

  <g row="2" transform="translate(0,50)">
    <use col="a" xlink:href="#myShape" x="0" />
    <use col="b" xlink:href="#myShape" x="50" />
  </g>

</svg>