如何在SVG中全局启用60度斜坐标系以计算路径？

要让SVG的<path>等元素直接基于60度斜坐标系计算，需正确配置坐标变换矩阵并遵循SVG变换的执行顺序（从右到左），以下是具体解决方法：

问题分析 #

当前<g>元素的变换顺序错误，且矩阵不符合60度斜坐标系的转换规则，导致斜坐标到正交坐标的映射未按预期生效。

核心修正步骤 #

1. 使用正确的斜坐标系转换矩阵
   对于x轴水平、y轴与x轴夹角60°的斜坐标系，斜坐标(x', y')转SVG正交坐标(x, y)的映射公式为：

   • x = x' + y' × cos60°
   • y = y' × sin60°
     对应SVG变换矩阵为：matrix(1, 0, 0.5, 0.8660254, 0, 0)（cos60°=0.5，sin60°≈0.8660254）

2. 调整变换执行顺序
   SVG的transform按从右到左的顺序执行，正确的变换链应为：先做斜坐标转换，再缩放，最后平移到画布可见区域，即：

   transform="translate(400,500) scale(20) matrix(1, 0, 0.5, 0.8660254, 0, 0)"
   

3. 修正子元素变换逻辑
   若要在斜坐标系下围绕原点复制元素，需让旋转操作先于斜坐标转换执行（因变换顺序从右到左，rotate需写在translate右侧）。

修改后的完整代码 #

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="swoop">
                <path d="m 5 1 c 1 2 2 6 -5 14 l 5 -3 c 4 -6 3 -10 1 -12 l -1 1"/> 
        </symbol>
    </defs>
    <g transform="translate(400,500) scale(20) matrix(1, 0, 0.5, 0.8660254, 0, 0)">
        <use href="#swoop" fill="#5A318E" transform="translate(2,-3)"/>
        <use href="#swoop" fill="#5A318E" transform="rotate(60) translate(2,-3)"/>
        <use href="#swoop" fill="#5A318E" transform="rotate(120) translate(2,-3)"/>
        <use href="#swoop" fill="#5A318E" transform="rotate(180) translate(2,-3)"/>
        <use href="#swoop" fill="#5A318E" transform="rotate(240) translate(2,-3)"/>
        <use href="#swoop" fill="#5A318E" transform="rotate(300) translate(2,-3)"/>
    </g>
</svg>

效果说明 #

修改后，<path>的d指令可直接使用60度斜坐标系的坐标值，父<g>的矩阵会自动将其转换为SVG的正交坐标；<use>的旋转和平移操作均基于斜坐标系生效，最终呈现出符合预期的六边形布局。

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