调整HTML SVG等距网格至26.7°角度的技术求助

• 基于HTML SVG + SCSS实现的等距网格，原示例倾斜角度为30°，计划用于项目开发
• 需要将倾斜角度调整为游戏《Project Zomboid》采用的26.7°
• 修改角度参数后，网格瓷砖出现错位、重叠的阶梯状效果，经数小时调试仍未解决，推测问题出在角度关联的数学计算或SVG布局逻辑上

• 仅修改了核心倾斜角度参数，未同步调整其他关联的布局计算项（如瓷砖偏移量、网格间距等）
• 调试效果截图：
• 核心代码片段：

// 原30°配置
$isometric-angle: 30deg;
$tile-width: 120px;
$tile-height: 60px;

// 修改后的26.7°配置
$isometric-angle: 26.7deg;
// 未调整$tile-width/$tile-height及定位计算逻辑

<svg class="isometric-grid" viewBox="0 0 1000 800">
  <!-- 动态生成的瓷砖路径/矩形元素 -->
</svg>

需要解决以下核心问题：

• 推导并修正与26.7°倾斜角匹配的瓷砖x/y轴定位公式
• 调整SVG容器或布局参数，适配新角度下的网格排列规则

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