为什么svg呈现倾斜(处理)？

Question

我的目标是重新制作经典的免费纸牌游戏Windows在Windows 10和处理3。

为了做到这一点，我从这里下载了一组svg文件，这些文件非常类似于旧卡的外观。

在我的代码中，我有一个名为Deck的类，它包含卡片的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 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);
  }
}

类Deck的Deck方法每一个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

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

在铲子-5.svg，第84/85行，删除

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

心脏-11-JACK.svg，第123/124号线，移除

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

(确保不删除>)