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

【问题标题】：How to fix SVG rotation for isometric grid pattern如何修复等距网格图案的 SVG 旋转
【发布时间】：2019-11-23 20:47:28
【问题描述】：

我正在尝试使用 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

知道我做错了什么吗？

【问题讨论】：

标签： svg rotation isometric skew

【解决方案1】：

svg 中的转换被应用到前面。颠倒转换的顺序就可以了...

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

【讨论】：

是的。这样做；谢谢。我在上面提到的 CodePen 中添加了一个更正的版本。