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:

Reproduziere das Problem mit der bereitgestellten infinity-knot-Skizze, Processing 4.3, processing.svg und Inkscape 1.3 und untersuche anschließend das generierte SVG sowie den im Bericht erwähnten Batik-basierten Exportpfad. Als erledigt gilt die Aufgabe, wenn PROJECT-Endkappen und MITER-Verbindungen im exportierten SVG in Inkscape und Browser-Viewern konsistent gerendert werden.