在 SVG 中使用斜坐标

Question

这个 Code Golf SE 问题 给出了 60 度倾斜坐标系中的坐标。虽然完全有可能将这些坐标转换为正交坐标，但我很好奇是否有办法全局强制，例如

<path>

元素以斜坐标计算。

例如，这是我当前的代码：

<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="matrix(1.11535507165,-0.29885849072,-0.29885849072,1.11535507165,-2,3)translate(400,500)scale(20)">
<!--Note: Due to svg weirdness I had to manually transform #swoop's path. That's why this translate is here.-->
<use href="#swoop" fill="#5A318E" transform="translate(2,-3)"/>
<use href="#swoop" fill="#5A318E" transform="translate(2,-3)rotate(60,0,0)"/>
<use href="#swoop" fill="#5A318E" transform="translate(2,-3)rotate(120,0,0)"/>
<use href="#swoop" fill="#5A318E" transform="translate(2,-3)rotate(180,0,0)"/>
<use href="#swoop" fill="#5A318E" transform="translate(2,-3)rotate(240,0,0)"/>
<use href="#swoop" fill="#5A318E" transform="translate(2,-3)rotate(300,0,0)"/>
</g>
</svg>

产生这个：

显然在

<g>

中进行基础变换并没有像我期望的那样工作。

Answer 1

通常情况下，我会自己在 Code Golf 中提交一个答案，但由于这对 SO 来说是一个合理的问题，所以这里有一个答案原则上，忽略了在这里被认为是不好的练习的高尔夫。

关键变换是

skewX(30)

，倾斜Y轴顺时针30度。请注意，在 SVG 中，Y 轴指向down。这意味着要获得预期结果，必须进行第二次转换

scale(1 -1)

.

上面的六边形不能写成歪斜的，因为笔划也会歪斜，导致笔划宽度不等

<svg viewBox="-14 -12 28 24" >
  <defs>
    <path id="swoosh" d="M3-2C4,0 5,4-2,12L3,9C7,3 6-1 4-3Z" transform="scale(1-1)skewX(30)" />
  </defs>
  <g id="third">
    <use href="#swoosh" fill="#5A318E" />
    <use href="#swoosh" transform="rotate(60)" fill="#54A2E1" />
  </g>
  <use href="#third" transform="rotate(120)" />
  <use href="#third" transform="rotate(240)" />
  <path d="M-1.923,5.33 3.655,4.33 5.578-1 1.923-5.33-3.655-4.33-5.578,1Z" style="fill:none;stroke:#576AB7;stroke-width:.5" />
</svg>