Gradient filled rectangles, why is the border thinner

[yangxun521]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
See this playground.

Expected behavior
I would have expected the PDF to look like so.
This is in accordance to the following SVG spec.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[yGuy]

Here is a stripped down version of the SVG:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <linearGradient id="fill">
    <stop offset="0" style="stop-color:#777;stop-opacity:0.5"></stop>
    <stop offset="1" style="stop-color:#777;stop-opacity:0.5"></stop>
  </linearGradient>
  <rect style="stroke: red; stroke-width: 10; fill: url(#fill);" x="25" y="25" width="50" height="50"></rect>
</svg>

PlayGround

It seems that for gradients (only for gradients) the fill is rendered up to the center of the stroke, covering half of the stroke, as you can see with opacity enabled. This doesn't happen with regular fills.

This can be reproduced in Chrome/Edge Version 126.0.2592.102 (Official build) (64-bit) on Windows 11

I can't tell whether this is an issue with jspdf or svg2pdf at this point.

PS: thanks for the report, but next time, please at least delete all of the template parts that you have not filled out.

[HackbrettXXX]

It looks like the fill and stroke are applied in the wrong order:

% rect path:
25. 25. m
75. 25. l
75. 75. l
25. 75. l
h
q
W S % sets the path as the current clip path and strokes it
/GS1 gs
50. 0. 0. 50. 25. 25. cm
/Sh1 sh % renders the gradient clipped by the clip path

This should be fixed in jspdf. I'm not sure if there is an elegant solution to this without having to duplicate the shape path.