Wkhtmltopdf SVG Padding - svg

Question

I'm trying to add padding around SVG figures that are drawn via Raphael, and am seeing the following from wkhtmltopdf. Has anyone else dealt with this issue? Is padding supported on SVG elements?

Answer 1

Of course you can add padding and other styling rules to your Raphael-created SVG elements. It's just another element in the DOM -- there's no need for a workaround. #BigBadaboom's assertion is only true for elements inside the SVG element, not the SVG element itself.
<style type="text/css">
svg.padding-please
{
padding: 20px;
background-color: rgb(128,128,128);
border: 1px solid black;
margin: 20px;
}
</style>
And when you create your Raphael paper objects:
var paper = Raphael( 'container', width, height );
jQuery( paper.canvas ).attr( "class", "padding-please" ); // `canvas` gives us direct access to the DOM node
Alternative Approach
You could always whip up a simple Raphael extension to add a specified amount of margin to a given SVG by manipulating the viewbox. For instance:
Raphael.fn.addMargin = function addMargin( ratio )
{
var contentBox = { x: 100000, y: 100000, width: 0, height: 0 };
this.forEach( function( element )
{
var elemBox = element.getBBox();
contentBox.x = Math.min( contentBox.x, elemBox.x );
contentBox.y = Math.min( contentBox.y, elemBox.y );
contentBox.width = Math.max( contentBox.width, elemBox.width );
contentBox.height = Math.max( contentBox.height, elemBox.height );
}, this );
if ( contentBox.x == 100000 ) // No elements? Whatevs
return;
var xMargin = contentBox.width * ratio;
var yMargin = contentBox.height * ratio;
this.setViewBox( contentBox.x - xMargin, contentBox.y - yMargin, contentBox.width + xMargin * 2, contentBox.height + xMargin * 2 );
}
Then if you wanted to add a 10% margin to a given SVG, you would just call
paper.addMargin( 0.1 );
There are so many ways to skin cats, it's amazing Felis catus isn't extinct =)