如何将圆形SVG牙列图修改为方形？

要把圆形牙列图改成方形，核心是替换所有基于圆弧/贝塞尔曲线的路径，改用直线构建方形轮廓和内部分区。以下是具体修改方法和完整代码：

关键修改步骤 #

• 替换外围圆形边框为正方形边框，在原有28x28的viewBox内，用2单位边距构建24x24的正方形（坐标从(2,2)到(26,26)）
• 重绘内部5个功能分区（顶部、左侧、中间、底部、右侧）的路径，用直线替代弧形，确保各区域衔接自然且保持原有功能标记

修改后的完整代码 #

<div> 18 <br />
  <svg width="48" height="48" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 顶部区域 -->
    <path class="odontogram-18-top" d="M6 6L22 6L22 10L6 10Z" fill="white" data-odontogram-condition="normal" />
    <!-- 左侧区域 -->
    <path class="odontogram-18-left" d="M6 10L6 22L2 22L2 6L6 6Z" fill="white" data-odontogram-condition="normal" />
    <!-- 中间区域 -->
    <path class="odontogram-18-middle" d="M6 10L22 10L22 22L6 22Z" fill="white" data-odontogram-condition="normal" />
    <!-- 底部区域 -->
    <path class="odontogram-18-bottom" d="M6 22L22 22L22 26L6 26Z" fill="white" data-odontogram-condition="normal" />
    <!-- 右侧区域 -->
    <path class="odontogram-18-right" d="M22 10L22 22L26 22L26 6L22 6Z" fill="white" data-odontogram-condition="normal" />
    <!-- 外围方形边框 -->
    <path d="M2 2L26 2L26 26L2 26ZM6 6L22 6L22 22L6 22ZM2 6L6 6L6 22L2 22ZM22 6L26 6L26 22L22 22ZM6 22L22 22L22 26L6 26Z" fill="black" />
    <!-- 保留原有X标记 -->
    <path class="x-mark" style="display: none;" d="M16.0085 13.6648L21.9591 6H25.8124L17.9693 15.9176L26 26H22.1125L16.0085 18.1978L9.87042 26H6L14.0477 15.9176L6.18755 6H10.0239L16.0085 13.6648Z" fill="#FF6060" />
  </svg>
</div>

细节说明 #

• 所有路径都使用直线命令（L）绘制，完全抛弃了原有的贝塞尔曲线（C），确保轮廓是标准方形
• 内部区域保持了原有的类名和data-odontogram-condition属性，原有交互逻辑可以直接复用
• 外围边框的路径简化为正方形的四条边，同时保留了内部区域的分隔线，视觉上和原圆形版本的分区逻辑一致

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