search

yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
643 stars 96 forks source link

Marker clipping #245

Closed edemaine closed 11 months ago

edemaine commented 1 year ago

Describe the bug Used <marker>s get clipped by a weird rectangle.

To Reproduce Put the following into a .html file, then open in a web browser. (Warning: It will immediately trigger a download of file test.pdf)

<html>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="117.63845825195312 182.9512939453125 48.78462219238281 84.23074340820312" width="48.78462219238281px" height="84.23074340820312px">
<marker id="arrow-black" viewBox="0 0 10 10" refX="9.5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse" overflow="visible"><path d="M 0 -1 L 10 3.854 A 1.252 1.252 0 0 1 10 6.146 L 0 11 z" fill="black"/></marker>
<polyline data-id="t8LpCW5Bm3bokNtgs" points="119.13845825195312,265.6820373535156 164.92308044433594,184.4512939453125" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" marker-end="url(#arrow-black)"/>
</svg>
<script type="module">
const {jsPDF} = await import("https://cdn.skypack.dev/pin/jspdf@v2.5.0-qOUBjLwjpjtUHvljumfc/dist=es2020,mode=imports,min/optimized/jspdf.js")
const {svg2pdf} = await import("https://cdn.skypack.dev/pin/svg2pdf.js@v2.2.1-E39EA3q6JjbAU0rSktv0/mode=imports,min/optimized/svg2pdfjs.js")
const width = 48.78462219238281
const height = 84.23074340820312
const pdf = new jsPDF({format: [width, height], orientation: 'portrait'})
await svg2pdf(document.querySelector('svg'), pdf, {width, height})
pdf.save('test.pdf')
</script>
</html>

Expected behavior It should look like the SVG:

image

Screenshots Instead the marker gets clipped. Here's a screenshot in Illustrator:

image

In the playground it's much better, but the back corners of the marker are clipped a little:

image

Desktop (please complete the following information):

yGuy commented 1 year ago

Looks like the viewbox is very tight around the arrow and maybe the path thickness is not considered for the clip. Obviously even Illustrator and Chrome's PDF rendering engine disagree, here.

Maybe, as a workaround try to increase the viewbox of the marker:

Playground variation

edemaine commented 11 months ago

Adding unit: 'px' to the jsPDF constructor, as suggested in https://github.com/yWorks/svg2pdf.js/issues/244#issuecomment-1670984841 , fixed this issue as well. Closing in favor of https://github.com/parallax/jsPDF/issues/3627