如何修复等距网格图案的 SVG 旋转

Question

我正在尝试使用 SVG 构建等距网格。按照 this tutorial 的建议，我有以下代码：

 <svg viewBox="-5 -5 20 10" xmlns="http://www.w3.org/2000/svg">
     <rect x="-3" y="-3" width="6" height="6" />
     <rect x="-3" y="-3" width="6" height="6" fill="red"
         transform="scale(1 .8602)" /> 
     <rect x="-3" y="-3" width="6" height="6" fill="yellow"
         transform="scale(1 .8602) skewX(-30)" /> 
     <rect x="-3" y="-3" width="6" height="6" fill="orange"
         transform="scale(1 .8602) skewX(-30) rotate(30)" />
     <circle cx="0" cy="0" r=".32" fill="navy"/>
</svg>

但不是生成这个形状（如教程中所示）：

最终结果如橙色所示： CodePen here

知道我做错了什么吗？

Answer 1

svg 中的变换从后到前应用。颠倒你的转换顺序就可以了...

transform="rotate(30) skewX(-30) scale(1 .8602)"

如何修复等距网格图案的 SVG 旋转

How to fix SVG rotation for isometric grid pattern

svg

rotation

isometric

skew