У меня есть <rect>, стиль которого отличается от его группы <g>. Стиль cw не применяется к Child 3.
path {
fill:none;
stroke-width: 2;
stroke-opacity: 1;
stroke-linejoin: round;
stroke-linecap: round;
}
g.spinoff path,
path.spinoff { stroke: #0000ff; }
rect {
paint-order: stroke;
stroke: #666666;
stroke-width: 4;
stroke-opacity: 1;
fill-opacity: 1;
fill: #ffffff;
}
g.dc rect { fill: #66ccff; }
rect.cw { fill: #99ff99; }
text {
fill: #000000;
font-family: arial, roboto, sans-serif;
font-size: 16px;
font-style: italic;
line-height: 1.2;
text-align: center;
text-anchor: start;
dominant-baseline: middle;
}
<svg viewBox="0 0 101 198" width="101" height="198">
<g transform="translate(5,5)">
<g id="Top_box_franchise" transform="translate(0,0)" class="dc">
<title id="Top_box_franchise_title">Top box</title>
<g class="spinoff" id="Top_box_spinoff_group" transform="translate(13)">
<title id="Top_box_spinoff_group_title">The Top box spinoffs</title>
<path d="m 0, 30 v 24 h 15" id="Top_box_to_Child_1" />
<path d="m 0, 54 v 40 h 15" id="Top_box_to_Child_2" />
<path d="m 0, 94 v 40 h 15" id="Top_box_to_Child_3" />
<path d="m 0, 134 v 40 h 15" id="Top_box_to_Child_4" />
</g>
<g id="Top_box" transform="translate(0,0)">
<title id="Top_box_title">Top box</title>
<rect id="Top_box_box" x="0" y="0" width="69" height="28" />
<text id="Top_box_text" x="6" y="14">Top box</text>
</g>
<g id="Child_1" transform="translate(30,40)">
<title id="Child_1_title">Child 1</title>
<rect id="Child_1_box" x="0" y="0" width="61" height="28" />
<text id="Child_1_text" x="6" y="14">Child 1</text>
</g>
<g id="Child_2" transform="translate(30,80)">
<title id="Child_2_title">Child 2</title>
<rect id="Child_2_box" x="0" y="0" width="62" height="28" />
<text id="Child_2_text" x="6" y="14">Child 2</text>
</g>
<g id="Child_3" transform="translate(30,120)">
<title id="Child_3_title">Child 3</title>
<rect id="Child_3_box" x="0" y="0" width="62" height="28" class="cw" />
<text id="Child_3_text" x="6" y="14">Child 3</text>
</g>
<g id="Child_4" transform="translate(30,160)">
<title id="Child_4_title">Child 4</title>
<rect id="Child_4_box" x="0" y="0" width="62" height="28" />
<text id="Child_4_text" x="6" y="14">Child 4</text>
</g>
</g>
</g>
</svg>
Живая версия здесь .