Forum Bugs

SVG clip path - Inaccurate clipping

mparento
My HTML file has a complex path clipped with a simple rectangular path, using clipPathUnits="objectBoundingBox". In the resulting PDF, the clipped area is larger than in the original HTML file. The difference is important enough to be a problem.

In the attached sample file, a red div is displayed to make the comparison easier. The HTML file is somewhat large due to the complex path (which may not be needed to reproduce the bug but I kept the actual path for which I observed the problem).
  1. svg-clip-path.html235.2 kB
    HTML source file
  2. svg-clip-path.pdf68.5 kB
    Converted PDF file
wangp
Thanks for the test case. The problem is that the calculation of the bounding box of a path containing a Bézier curve segment currently uses the control points as an approximation instead of the true extents of the curve. We will fix this.
mikeday
We have released a latest build with a fix for this, thanks for letting us know about the issue! :D
mparento
Hi, I am coming back to this bug because there seems to be an issue with SVG clipping in Prince 16. Please find attached my HTML test file and the PDF converted by Prince.
  1. test.html0.9 kB
    HTML source file
  2. test.pdf3.7 kB
    Converted PDF file

Edited by mparento

wangp
Prince applies a clip path that covers the top 80% of the SVG. The entire image is then fit into the 600x800 px container. I believe that is correct.

In comparison, Chromium appears to apply the clip path to the 600x800 px container instead of the SVG.

Firefox clips the SVG image completely, or at least doesn't show it. I don't know why.

In test2.html, the clip-path is applied to an inner <svg> element that completely covers the SVG viewBox. Then Prince, Chromium and Firefox all behave in the same way.
  1. test2.html1.3 kB
    clip-path on inner svg