How can i cut my hexagon svg in half vertically - html

Question

i have this hexagon svg:
<svg width="100%" height="125">
<g transform="translate(-33 -35)">
<g transform="translate(33 35)">
<polygon points="50,0 100,28.87 100,86.61 50,115.48 0,86.61 0,28.87" fill="#28282B"/>
</g>
<g transform="translate(83.5 68.305)">
<polygon points="0,0 -50,28.87 0,57.74 50,28.87" fill="#28282B" />
</g>
</g>
</svg>
I want to cut this in half vertically so that it looks like this
How can i achieve this?

Answer 1

The number pairs in the polygon's points attribute are x/y coordinates.
You could just lop off the last two points to get the right half of the hexagon.
In the snippet below the first path is the original hex. The second is the right half--same as the first but with the last two coordinates removed.
(I've also removed the two transform groups that canceled each other out, and the other poly that didn't appear to be contributing anything useful.)
<svg width="100%" height="125">
<!-- original hexagon -->
<polygon points="50,0 100,28.87 100,86.61 50,115.48 0,86.61 0,28.87" fill="#28282B"/>
<!-- right half -->
<polygon points="50,0 100,28.87 100,86.61 50,115.48" fill="#9999ff"/>
</svg>
Update: If you want the halves as separate SVGs make two copies and delete the relevant points from each:
<!-- left half -->
<svg viewBox="0 0 50 116" width="50" height="116">
<polygon points="50,0 50,115.48 0,86.61 0,28.87" fill="skyblue"/>
</svg>
<!-- right half -->
<svg viewBox="50 0 50 116" width="50" height="116">
<polygon points="50,0 100,28.87 100,86.61 50,115.48" fill="steelblue"/>
</svg>
I also tightened up the canvas with the viewBox attribute on these so they’d be easier to line up next to each other, without all the dead space where the other half used to be.