Вот как бы я это сделал: у вас есть резцы, моляры и премоляры. Вам нужно будет повторить это несколько раз. Поэтому я создаю группу для каждого и помещаю ее в элемент <defs>. У каждой группы есть идентификатор, и вы можете использовать его с элементом <use>. Хорошая вещь об элементе <use> состоит в том, что вы можете задать ему позицию (x, y) и разместить ее там, где вам нужно.
Также я поместил полигоны в <defs>, думая, что, возможно, они понадобятся вам позже, чтобы отметить красные пятна (как в предыдущем вопросе)
Наблюдение: с svg точно так же, как с другими элементами DOM, вы должны сохранить уникальные id s.
Надеюсь, это поможет.
svg {
border: solid;
}
svg polygon {
stroke-width: 5px;
stroke: black;
fill: white;
stroke-linejoin: round;
}
<svg viewBox="-10 -10 1040 320">
<defs>
<rect id="incisal" width="150" height="150" />
<polygon id="buccal" points="0 0 300 0 225 112.5 75 112.5" />
<polygon id="mesial" points="300 0 300 300 225 187.5 226 112.5" />
<polygon id="palatal" points="300 300 0 300 75 187.5 225 187.5" />
<polygon id="distal" points="0 300 0 0 75 112.5 75 187.5" />
<rect id="disto-occlusal" width="125" height="150" />
<rect id="mesio-occlusal" width="125" height="150" />
<polygon id="disto-buccal" points="0 0 200 0 200 75 75 75" />
<polygon id="mesio-buccal" points="200 0 400 0 325 75 200 75" />
<polygon id="disto-palatal" points="200 300 0 300 75 225 200 225" />
<polygon id="mesio-palatal" points="400 300 200 300 200 225 325 225" />
<polygon id="distal_1" points="0 300 0 0 75 75 75 225" />
<polygon id="mesial_1" points="400 0 400 300 325 225 325 75" />
<rect id="disto-occlusal" width="125" height="150" />
<rect id="mesio-occlusal" width="125" height="150" />
<polygon id="buccal2" points="0 0 300 0 225 75 75 75" />
<polygon id="mesial2" points="300 0 300 300 225 225 225 75" />
<polygon id="palatal2" points="300 300 0 300 75 225 225 225" />
<polygon id="distal2" points="0 300 0 0 75 75 75 225" />
<g id="incisor-group">
<use xlink:href="#buccal" />
<use xlink:href="#mesial" />
<use xlink:href="#palatal" />
<use xlink:href="#distal" />
</g>
<g id="molar-group" class="molar">
<use xlink:href="#disto-buccal" />
<use xlink:href="#mesio-buccal" />
<use xlink:href="#mesial_1" />
<use xlink:href="#mesio-palatal" />
<use xlink:href="#disto-palatal" />
<use xlink:href="#distal_1" />
</g>
<g id="premolar-group">
<use xlink:href="#buccal2" points="0 0 300 0 225 75 75 75" />
<use xlink:href="#mesial2" points="300 0 300 300 225 225 225 75" />
<use xlink:href="#palatal2" points="300 300 0 300 75 225 225 225" />
<use xlink:href="#distal2" points="0 300 0 0 75 75 75 225" />
</g>
</defs>
<use xlink:href="#incisor-group"/>
<use x="310" xlink:href="#molar-group"/>
<use x="720" xlink:href="#premolar-group"/>
</svg>