Marker clipping
edemaine opened this issue · 2 comments
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:
Screenshots
Instead the marker gets clipped. Here's a screenshot in Illustrator:
In the playground it's much better, but the back corners of the marker are clipped a little:
Desktop (please complete the following information):
- OS: Windows 11
- Browser: Chrome
- Version: 108.0.5359.100
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:
Adding unit: 'px' to the jsPDF constructor, as suggested in #244 (comment) , fixed this issue as well. Closing in favor of parallax/jsPDF#3627