在已使用的 defs/symbol 中选择一个 class

Question

我正在尝试根据封闭的 CSS class 更改多元素 defs 的颜色。到目前为止，我的成功率为零。我开始使用 symbol，然后将其更改为带有 g 的 defs。

我整理了一个代码笔示例：addressing a class within a defs右边的方块应该是顶部绿色底部黄色。

.rect1 { fill: red; }
.rect2 { fill: yellow; }
.morph .rect1 { fill: green; }

rect { stroke: black; }
svg { background-color: lightblue; }

<svg viewBox="0 0 100 100">
  <defs>
    <g id="house-def">
      <rect class="rect1" x="10" y="10" width="20" height="10" />
      <rect class="rect2" x="10" y="20" width="20" height="10" />
    </g>
  </defs>
  <use xlink:href="#house-def" />
  <use xlink:href="#house-def" class="morph" transform="translate(30)" />
  
</svg>

这可能吗？

感谢您的帮助。

Answer 1

与其尝试更改 rect1 的颜色，不如更改使用元素的填充：

use{ fill: red; }/*will fill red both use elements*/
.rect2 { fill: yellow; }/*will fill yellow the .rect2 inside defs*/
.morph { fill: green; }/*will fill green the second use element overwritting the fill:red from the first roule.*/

rect { stroke: black; }
svg { background-color: lightblue; }

<svg viewBox="0 0 100 100">
  <defs>
    <g id="house-def">
      <rect class="rect1" x="10" y="10" width="20" height="10" />
      <rect class="rect2" x="10" y="20" width="20" height="10" />
    </g>
  </defs>
  <use class="a" xlink:href="#house-def" />
  <use xlink:href="#house-def" class="morph" transform="translate(30)" />
  
</svg>

在已使用的 defs/symbol 中选择一个 class

Selecting a class within a used defs/symbol

css

svg

symbols

svg-defs