svg组和填充继承

我的目标是让第一组3个方块为蓝色，下一组3个方块为红色。为了最小化代码，我想利用SVG中的分组。所有矩形都保持蓝色。我在第二个group元素和use元素上尝试了内联样式，但这并不能解决问题。谢谢你的帮助。。代码如下：

<svg width="1000" height="800" 
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">

<style>
.blue {fill:blue;}
.red {fill:red;}
</style>

<g id="g1" class="blue">
    <rect x="0" y="0" width="100" height="100" />
    <rect x="0" y="105" width="100" height="100" />
    <rect x="0" y="210" width="100" height="100" />
</g>

<g class="red">
<use xlink:href="#g1" transform="translate(0,315)"  />
</g>

下面是上面的一些更改，这些更改现在可以正常工作了：

<g class="blue">
<g id="g1">
    <rect x="0" y="0" width="100" height="100" />
    <rect x="0" y="105" width="100" height="100" />
    <rect x="0" y="210" width="100" height="100" />
</g>
</g>

<g class="red" transform="translate(0,315)">
<use xlink:href="#g1" />
<!-- <g id="g1">
    <rect x="0" y="0" width="100" height="100" />
    <rect x="0" y="105" width="100" height="100" />
    <rect x="0" y="210" width="100" height="100" />
</g> -->
</g>

。。。我还注释掉了一些旧的svg

这是一个更清晰的解决方案，上面的一些注释代码实际上来自进一步的实验

<svg width="1000" height="800" 
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">

<style>
.blue {fill:blue;}
.red {fill:red;}
</style>


<g class="blue">
<g id="g1">
    <rect x="0" y="0" width="100" height="100" />
    <rect x="0" y="105" width="100" height="100" />
    <rect x="0" y="210" width="100" height="100" />
</g>
</g>

<g class="red" transform="translate(0,315)">
<use xlink:href="#g1" />
</g>

---

在我的案例中，样式设置需要在组之上的级别进行，正如Robert指出的那样，将按书面形式检索上一个组。

如果需要不同的样式，请不要使用use标记，因为它适用于同一事物的多个视图。谢谢-我现在有了更好的理解。此外，问题似乎已经解决了——我不知道我现在是否应该编辑我的原始帖子——但我用蓝色类将蓝色组包装在一个新组中，这似乎成功了。