如何垂直切割六边形SVG？附示例代码及目标样式参考

要实现将你的SVG六边形垂直切割为一半（匹配参考的左半六边形样式），只需调整多边形顶点并移除右侧冗余图形，具体操作如下：

步骤1：梳理原SVG结构 #

原SVG由一个完整正六边形和右侧附加的菱形组成，垂直切割需要移除所有位于中线（x=50，正六边形的垂直对称轴）右侧的元素。

步骤2：修改主多边形顶点 #

保留原正六边形中位于中线左侧及中线上的顶点，移除x>50的右上、右下顶点，最终顶点序列为：50,0 0,28.87 0,86.61 50,115.48。

步骤3：移除右侧附加图形 #

直接删除原SVG中第二个<polygon>标签及其所在的<g>容器，这部分位于中线右侧，不属于半六边形范围。

最终修改后的SVG代码 #

<svg width="100%" height="125">
  <g transform="translate(-33 -35)">
    <g transform="translate(33 35)">
      <!-- 垂直切割后的左半六边形 -->
      <polygon points="50,0 0,28.87 0,86.61 50,115.48" fill="#28282B"/>
    </g>
  </g>
</svg>

可选调整：适配容器宽度 #

如果希望半六边形占满容器宽度，可将SVG的width属性改为50%，让图形更紧凑地展示半六边形形态。

内容的提问来源于stack exchange，提问作者Shubham Kandalgaonkar