使用wkhtmltopdf以pdf格式导出<svg>

Question

我使用mike haertl的phpwkhtmltopdf（https://github.com/mikehaertl/phpwkhtmltopdf） 一切都很完美，很容易..但我有一个巨大的问题。我可以导出播放.svg的<img>，但我无法导出<svg>。

例如：

这是我从图形部门收到的那种“原始”.svg。

然后将.svg转为<svg>我使用javascript：

<script type="text/javascript">
            $(function(){
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Check if the viewport is set, else we gonna set it if we can.
                if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
                    $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
                }

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');   
        });
    });
    </script>

结果我得到了这样的东西：

这允许我将样式表添加到图层。即

<style type="text/css">
svg #GRILLE-1 * {stroke: darkgrey; stroke-width:2px; vector-effect:non-scaling-stroke;shape-rendering: crispedges;}
svg #GRILLE-2 * {stroke: lightgrey; stroke-width:1px; vector-effect:non-scaling-stroke;shape-rendering: crispedges;}
svg #GRILLE-TEXT text {font-size: 10px;
font-family: sans-serif;
fill: grey;
}
svg #GRILLE-DASH * {stroke: grey; stroke-width:1px; stroke-dasharray: 5,5;}
svg #VISUEL-1 * {stroke: black; stroke-width:3px;fill:none;}
svg #VISUEL-2 * {stroke: grey; stroke-width:2px;fill:none;}
svg #VISUEL-3 * {stroke: lightgrey; stroke-width:2px;fill:none;}
</style>

在Intranet上我没有问题显示好结果。在Chrome的webkit上：

所以我的问题是当我通过wkhtmltopdf导出pdf时，得到的结果与“raw”文件相同。如果我直接转到我导出的页面的url，一切都显示正常。 ..

我不知道该做什么以及从哪里开始解决这个问题。

修改

ROOT（/ pdf / _demo /）：

    require 'file:///Users/************/vendor/autoload.php' ;
use mikehaertl\wkhtmlto\Pdf;


$pdf = new Pdf(array(
    'binary' => '/usr/local/bin/wkhtmltopdf',
    'ignoreWarnings' => true,
    'no-outline',         // Make Chrome not complain
    'margin-top'    => 0,
    'margin-right'  => 0,
    'margin-bottom' => 0,
    'margin-left'   => 0,
    'page-size' => 'A4',
    //'width'         => 960,
    //'dpi' => 248,
    'dpi' => 248,
    'javascript-delay' => 3000,

    // Default page options
    'disable-smart-shrinking',
    //'user-style-sheet' => $_SERVER['DOCUMENT_ROOT'].'/pdf/_demo/lapis/pdf.css',

));

        $content1 = '*****/pdf/_demo/contenu/contenu-1.php';
        $content2 = '*****/pdf/_demo/contenu/contenu-2.php';



        $pdf->addPage($content1);
        $pdf->addPage($content2);

        if (!$pdf->saveAs('rendus/'.$n.'.pdf')) {
            echo $pdf->getError();
        }

        echo 'succès';

and content1（/pdf/_demo/contenu/contenu-1.php）

<style type="text/css">
svg #GRILLE-1 * {stroke: darkgrey; stroke-width:2px; vector-effect:non-scaling-stroke;shape-rendering: crispedges;}
svg #GRILLE-2 * {stroke: lightgrey; stroke-width:1px; vector-effect:non-scaling-stroke;shape-rendering: crispedges;}
svg #GRILLE-TEXT text {font-size: 10px;
font-family: sans-serif;
fill: grey;
}
svg #GRILLE-DASH * {stroke: grey; stroke-width:1px; stroke-dasharray: 5,5;}
svg #VISUEL-1 * {stroke: black; stroke-width:3px;fill:none;}
svg #VISUEL-2 * {stroke: grey; stroke-width:2px;fill:none;}
svg #VISUEL-3 * {stroke: lightgrey; stroke-width:2px;fill:none;}
</style>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>


 <img class="svg" src="/pdf/_demo/contenu/test.svg">

 <script type="text/javascript">
            $(function(){
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Check if the viewport is set, else we gonna set it if we can.
                if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
                    $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
                }

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');   
        });
    });
    </script>