如何修改SVG代码绘制边长角度不等的不规则类六边形图形

你当前使用的是SVG编辑器自动生成的规则正六边形预设，自带固定等长边长、等大夹角、绑定的编辑器属性，要实现不规则类六边形效果，直接按以下步骤修改即可：

• 清理冗余预设属性
  先删除原<path>标签上的bx:shape属性——这个是编辑器绑定的规则多边形标记，不删除的话后续修改路径会被强制还原为正六边形；同时删掉原path上复杂的矩阵transform变换，直接基于viewBox="0 0 500 500"的画布坐标绘制即可，不需要额外做旋转偏移计算。
• 明确路径指令逻辑
  原有正六边形的路径由两类指令构成：L代表直线段（对应六边形的边臂），Q代表二次贝塞尔曲线（对应顶点处的圆角/夹角），最后用Z闭合路径。你不需要遵循正六边形的坐标计算规则，直接自定义每个点的坐标就能控制臂长和角度：

  路径编写规则：

  1. 开头用M x y定义图形的起始点坐标
  2. 每段顶点圆角用Q 控制点x 控制点y 圆角终点x 终点y，控制点的位置直接决定夹角大小、圆角弧度
  3. 每段边臂用L 终点x 终点y，两个端点的直线距离就是这条边臂的长度
  4. 所有边绘制完成后加Z，路径会自动闭合回起始点

• 自定义参数实现目标效果
  你可以根据需要的形状逐一定义6个顶点的位置：想要某条臂更长，就拉大对应直线段两个端点的距离；想要某个夹角更大/更小，就调整相邻两条边的斜率，不需要受正六边形固定120度内角的限制。下面是一个可直接复用的不规则类六边形示例代码，你可以修改各点坐标匹配目标效果：

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <path d="
    M 250 78 
    Q 256 73 266 81
    L 382 162
    Q 393 169 389 186
    L 361 322
    Q 356 336 341 339
    L 239 391
    Q 227 394 217 386
    L 119 301
    Q 107 291 111 273
    L 139 149
    Q 144 134 159 131
    Z
  " style="fill: rgb(216,216,216); stroke: rgb(0,0,0); stroke-width: 1px;"/>
</svg>

• 快速调参技巧
  • 调整臂长：只需要修改对应L指令的终点坐标，两点间距越大，边臂越长
  • 调整夹角：修改相邻两段直线的端点相对位置，三个相邻点的坐标关系直接决定夹角度数，不需要做角度换算
  • 调整圆角：修改Q指令的控制点坐标，控制点离顶点越近，圆角越小，越接近尖角效果
    如果需要精准匹配目标形状，可以把目标图导入SVG编辑器作为底图，沿着轮廓描点生成路径，效率比手动计算坐标高很多。

内容的提问来源于stack exchange，提问作者morteza mortezaie