javascript - svg 中是否有一个变换矩阵，使 x 变为 y，y 变为 x？

Question

我正在与 svgpath 合作为了操作 svgs，我需要更改坐标系，使 y 变为 x，x 变为 y。我的问题是有什么办法可以做到这一点。我尝试围绕点 0 0 旋转并按图形的高度进行平移。

Answer 1

作为 svg 变换属性，它是

transform="matrix(0 1 1 0 0 0)"

<svg width="300" height="100"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="pos" >
    <path fill="none" stroke="black" d="M20,80 V20 H80 M20,20 80,80" />
    <circle cx="20" cy="20" r="10" fill="red" />
    <circle cx="80" cy="20" r="10" fill="yellow" />
    <circle cx="20" cy="80" r="10" fill="green" />
    <circle cx="80" cy="80" r="10" fill="blue" />
  </symbol>
  <!-- transposed -->
  <use xlink:href="#pos" transform="matrix(0 1 1 0 0 0)" />
  <!-- original, but moved to the side for comparison -->
  <use xlink:href="#pos" transform="translate(150)" />
</svg>

在 svgpath 语法中，

svgpath(__your_path__).matrix([0, 1, 1, 0, 0, 0])