Wkhtmltopdf SVG填充

Question

我正在尝试在通过Raphael绘制的SVG数据周围添加填充，并且从wkhtmltopdf中看到以下内容。还有其他人处理过这个问题吗？ SVG元素是否支持填充？

Answer 1

当然，您可以为Raphael创建的SVG元素添加填充和其他样式规则。它只是DOM中的另一个元素 - 不需要解决方法。 @BigBadaboom的断言仅适用于SVG元素内的元素，而不适用于SVG元素本身。

<style type="text/css">
    svg.padding-please
    {
        padding: 20px;
        background-color: rgb(128,128,128);
        border: 1px solid black;
        margin: 20px;
    }
</style>

当你创建Raphael纸质对象时：

var paper = Raphael( 'container', width, height );
jQuery( paper.canvas ).attr( "class", "padding-please" );  // `canvas` gives us direct access to the DOM node

替代方法

你总是可以通过操纵视图来创建一个简单的Raphael扩展来为给定的SVG添加指定数量的边距。例如：

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 );
}

然后，如果您想为给定的SVG添加10％的保证金，您只需拨打

即可

paper.addMargin( 0.1 );

有许多方法可以给猫皮肤带来很多惊人的猫科动物并不会灭绝=）