为什么 svg 呈现倾斜（处理）？

Question

我的目标是在 Windows 10 上用 Processing 3 为 Windows Xp 重制 classic Freecell 纸牌游戏。
为此，我从 here 下载了一组最像旧卡片外观的 svg 文件。
在我的代码中，我有一个名为 Deck 的 class，它包含一个 ArrayList 卡片，并且在构建时初始化卡片，为它们提供所需的 svg 文件的路径，之后还有 x和 y 坐标。

class Deck
{
  String[] seeds = {"HEART", "DIAMOND", "CLUB", "SPADE"};
  String[] values = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"};
  ArrayList<Card> cards = new ArrayList<Card>();
  
  Deck()
  {
    //Create the cards and store them into the array.
    for(int seed = 0; seed < seeds.length; seed++)
    {
      for(int value = 0; value < values.length; value++)
      {
        String cardName = seeds[seed] + "-" + values[value] + ".svg";
        cards.add(new Card(cardName));
      }
    }

    //Shuffle the deck.
    //this.shuffle();

    //Give the cards x and y coordinates.
    for(int c = 0; c < cards.size(); c++)
    {
      int x = cardSpace + (cardWidth+cardSpace)*(c%8);
      int y = 32 + cardHeight + edge*2 + cardSpace + 25*(c/8);
      cards.get(c).setxy(x, y);
    }
  }
  
  void shuffle()
  {
    for(int c = cards.size()-1; c > 0; c--)
    {
      int k = (int)Math.floor(Math.random() * (c + 1));
      Card card = cards.get(c);
      cards.set(c, cards.get(k));
      cards.set(k, card);
    }
  }
  
  void render()
  {
    for(Card card : cards)
    {
      card.render();
    }
  }
}

卡片class:

class Card
{
  PShape svg;
  int x;
  int y;
  
  Card(String svgName)
  {
    this.svg = loadShape(svgName);
  }
  
  void setxy(int x, int y)
  {
    this.x = x;
    this.y = y;
  }
  
  boolean isMouseOver()
  {
    return mouseX > x && mouseX < (x+cardWidth) && mouseY > y && mouseY < (y+cardHeight);
  }
  
  void render()
  {
    shape(svg, x, y, cardWidth, cardHeight);
  }
}

classDeck的render()方法每draw()循环调用一次，frameRate设置为10。
无论如何，代码工作正常，唯一的问题是如何呈现两个 svg，如您在此处所见：由于某些原因，只有黑桃5和红桃的内图完全倾斜。
但是，当使用 Inkscape 或任何浏览器打开时，它们看起来方向正确，因此我很困惑。
我尝试使用这两个 svg 的原始版本，但它们仍然呈现倾斜。我试图比较这两个 svg 的 xml，但我不明白是什么导致了这个问题。
它也可能正在处理中，但我不知道为什么或如何修复它。
任何帮助将不胜感激，提前致谢。

编辑
根据评论中的要求添加主草图文件。
但是请注意，它已从上方的灰色条和矩形中剥离。

//Global objects.
Deck deck;
//Global objects.

//Global variables.
int edge = 2;
int cardSpace = 15;
int cardWidth = 100;
int cardHeight = 140;
//Global variables.

void settings()
{
  int w = cardWidth*8 + cardSpace*9;
  int h = cardHeight*5 + 32;
  size(w, h);
}

void setup()
{
  frameRate(30);
  
  deck = new Deck();  //Initialized here because of loadImage().
}

void draw()
{
  background(60, 145, 50);
  deck.render();
}

Answer 1

我测试了它，这似乎可以解决它。

在 SPADE-5.svg 中，第 84/85 行，删除

transform="rotate(180,1744.645,-315.5025)"

HEART-11-JACK.svg，第 123/124 行，删除

transform="rotate(0.33810995,363.27095,269.89449)"

（确保不要删除 >）

为什么 svg 呈现倾斜（处理）？

Why are svg rendered tilted (Processing)?

java

processing

svg

rendering

image-processing