We're trying to output a PDF of a map generated by the Leaflet JS package. It includes images and SVG. We've manipulated the markup some and gotten the images to align correctly, mostly by modifying the "transform:translate3d" style to instead use "transform:translate" - apparently the translate3d property isn't supported at Prince 9.0 rev 5. We can deal with that.

However the SVG isn't coming through in the PDF. This HTML file looks fine in Chrome/Firefox (it's a map of Florida):
mapChrome2.html‎

But Prince does not show the SVG graphics at all, which are orange circles scattered around the state:
mapChrome2.pdf‎

I can get the graphics to at least display, such as by removing the transform style on the SVG and moving the SVG out of the map div, but of course now it doesn't align or scale correctly:
mapChrome2a.pdf‎

Is there something I'm missing or need to do to get the SVG to display and align in the PDF as it does in the browser? Thanks!

1. mapChrome2.html‎ 22.2 kB
2. mapChrome2.pdf‎ 157.7 kB ‎
   Map without SVG
3. mapChrome2a.pdf‎ 162.3 kB ‎
   Map with SVG misaligned

Tricky. At first glance, it looks like .leaflet-overlay-pane is getting the wrong width, not sure why. This might take some detailed investigation.

Okay this was a tough one to track down! It turned out that we are applying "max-width: 100%" to SVG elements in our default style sheets, and that interacts badly with intrinsic width calculations, eg. putting an SVG inside a float or an absolutely positioned block. We will remove this declaration in the next release.

For now, you can fix the problem by applying this CSS rule:

svg { max-width: none }

Fantastic! That does make the SVG align to the images. Thanks a ton for ferreting out the issue.

Prince 10 is now available, and removes the unwanted max-width declaration from the default SVG style sheet, and also supports translate3d() if the z-coordinate is zero. Thanks for letting us know about these issues.