为啥 svg 呈现倾斜（处理）？

Posted 2023-03-28

【中文标题】为啥 svg 呈现倾斜（处理）？

【英文标题】：Why are svg rendered tilted (Processing)?为什么 svg 呈现倾斜（处理）？

【发布时间】：2020-12-19 03:19:12

【问题描述】：

我的目标是使用 Processing 3 在 Windows 10 上为 Windows Xp 重制经典的 Freecell 纸牌游戏。 为此，我从here 下载了一组最类似于旧卡片外观的 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 类的render() 方法每draw() 循环调用一次，frameRate 设置为 10。 无论如何，代码工作正常，唯一的问题是如何呈现两个 svg，如您在此处看到的： 由于某些原因，只有黑桃 5 和红心 jack 的内图完全倾斜。 但是，当使用 Inkscape 或任何浏览器打开时，它们看起来方向正确，因此我很困惑。 我尝试使用这两个 svg 的原始版本，但它们仍然呈现倾斜。我试图比较这两个 svg 的 xml，但我不明白是什么导致了问题。 它也可能正在处理中，但我不知道为什么或如何修复它。 任何帮助将不胜感激，在此先感谢。

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

//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();

【问题讨论】：

我很难过。我下载了图像文件，它们看起来还不错。你能发一个minimal reproducible example吗？

@KevinWorkman 好吧，这就是我所做的一切啊，我下载了图像并检查了它们，在 svg 编辑器和浏览器中它们看起来都很好。但是，当加载到处理中时，它们看起来像那样。我可以发布draw() 函数，但里面的所有内容都是绘制一堆矩形（您在顶部看到的那些），然后调用deck.render()。

如果无法运行代码，将很难进一步调试，因此我建议发布minimal reproducible example。请注意，这应该不是您的完整程序。尝试从头开始并仅画出有问题的卡片。

@KevinWorkman 我编辑了这个问题。现在好点了吗？无论如何，只画有问题的卡片会导致同样的问题，如果人们只想查看有问题的卡片，只需注释掉Deck() 中的第一个 for 循环即可加载所有卡片并添加两行代码以仅加载有问题的卡片卡片。

【参考方案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)"

（确保不要删除>）