SVG Shape End caps rendered wrong

Created by: matiasw

Description

In my code, I have set strokeCap(PROJECT); and strokeJoin(MITER); and then drawn a shape, which is a looping path. It renders correctly in Processing 4.3, but when saved as SVG with processing.svg and opened in Inkscape, it is shown incorrectly. Have a look at the images to see what I mean.

Expected Behavior

Processing - this is correct.

Inkscape - this is wrong.

I am not sure if this is a Processing issue or an Inkscape one, so I am reporting it here, first.

Steps to Reproduce

1. Draw the infinity knot. Here is my code:

import processing.svg.*;

boolean record;

class Point {
 public float x, y;
 
 Point(float x, float y)
 {
   this.x = x;
   this.y = y;
 }
}

class LineSegment {
   PVector[] points;
}

class Knot {
   float d = 80;
   public final int points = 14;
   Point[] p = new Point[points];
   
   Knot()
   {
     p[0] = new Point(-4, 0);
     p[1] = new Point(-3, -1);
     p[2] = new Point(1, 3);
     p[3] = new Point(2, 2);
     p[4] = new Point(-2, -2);
     p[5] = new Point(-1, -3);
     p[6] = new Point(3, 1);
     p[7] = new Point(4, 0);
     p[8] = new Point(3, -1);
     p[9] = new Point(-1, 3);
     p[10] = new Point(-2, 2);
     p[11] = new Point(2, -2);
     p[12] = new Point(1, -3);
     p[13] = new Point(-3, 1);
   }
   
   Point getPoint(int i)
   {
     return new Point(p[i].x * d, p[i].y * d);
   }
}

PImage bg;

PVector intersection (float x1, float x2, float x3, float x4, float y1, float y2, float y3, float y4)
{
  float uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
  float uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));  
  return new PVector(uA, uB); 
}

void setup()
{
  fullScreen();
  strokeCap(PROJECT);
}

void draw()
{
   if (record) {
   // Note that #### will be replaced with the frame number. Fancy!
     beginRecord(SVG, "frame-####.svg");
   }
   Knot k = new Knot();
   translate(width/2, height/2);
   noFill();
   strokeWeight(45);
   stroke(0);
   strokeJoin(MITER);
   beginShape();
   for (int i = 0; i < k.points; i++) {
     vertex(k.getPoint(i).x, k.getPoint(i).y); 
   }
   vertex(k.getPoint(0).x, k.getPoint(0).y);
   endShape();
   if (record) {
    endRecord();
    record = false;
  }
}

// Use a keypress so thousands of files aren't created
void mousePressed() {
  record = true;
}

2. Click the mouse to save as SVG.
3. Open the SVG in Inkscape 1.3.

Your Environment

• Processing version: 4.3
• Operating System and OS version: Windows 11 22H2

Possible Causes / Solutions

Maybe the problem is in the Batik library, which I understand Processing uses, but I thought I'd start downstream before escalating. It could also be with Inkscape, in the way that they open the resulting file. If it is, however, then it is also in whatever Vivaldi uses for SVG handling, as it's rendered with the rounded (incorrect) cap join in my browser as well. Here is the file as saved from Processing:

使用提供的 infinity-knot 草图、Processing 4.3、processing.svg 和 Inkscape 1.3 重现该问题，然后检查生成的 SVG 以及报告中提到的基于 Batik 的导出路径。完成的标准是，PROJECT 端帽和 MITER 连接在导出的 SVG 中通过 Inkscape 和浏览器查看器进行渲染时保持一致。