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
654 stars 100 forks source link

Empty <clip-path> element leads to unexpected behavior by jsPDF #96

Closed Fadiabb closed 5 years ago

Fadiabb commented 5 years ago

Describe the bug When <clip-path> element is empty comes to rendering of rotated text on pdf during the use of jspdf.Text() after the call of svg2pdf() version: 38f10d329807d2a671e78695a4504dc3ebbb7a33

To Reproduce Adding text via jsPDF.Text() after the svg2pdf() function will render rotated text if there is by <svg> element an empty <clip-path> element

<script type="text/javascript">
      function downloadpdf() {
        const pdf = new jsPDF("l", "pt", "a4");
        const SVGAElement = document.getElementById("svg");
        svg2pdf(SVGAElement, pdf, {
          xOffset: 20,
          yOffset: 90,
          scale: 25.4 / 72
        });
        pdf.text("some text to test", 60, 60);
        pdf.save("a.pdf");
      }
    </script>
<svg id="svg" witdh="100%" height="100%">
        <clipPath id="id">
          <!-- <rect x="10" y="30" width="20" height="20"></rect> -->
        </clipPath>

        <path
          clip-path="url(#id)"
          d="M10 30 L160 30 160 60 L10 60 L10 30 Z"
          fill="blue"
        ></path>
</svg>

Expected behavior Render the text in right way

Screenshots the rendered text on pdf: clip-path-issue

Commenting out the <!-- <rect x="10" y="30" width="20" height="20"></rect> --> in the code will render the text correctly

HackbrettXXX commented 5 years ago

And you found another bug... This pretty much looks like empty clipPaths break the graphics state stack, which means that our top-level change of basis matrix is still active after svg2pdf/jsPDF's advancedAPI mode. Another reason might be an invalid matrix (e.g. with NaNs) created by the clipPath. We are open for pull requests ;)

The workaround is simple: just remove any empty clip paths beforehand.