экспорт <svg>в pdf с wkhtmltopdf

Question

Я использую phpwkhtmltopdf от mike haertl (https://github.com/mikehaertl/phpwkhtmltopdf) Все работает отлично и легко ... но у меня ОГРОМНАЯ проблема. Я могу экспортировать <img>, который воспроизводит .svg, но я не могу экспортировать <svg>.

Например:

вот вид "raw" .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>

В результате получаю что-то вроде этого:

Это позволяет мне добавлять таблицы стилей в слои. IE

<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>

В интрасети у меня нет проблем с отображением хорошего результата. Также и в веб-наборе Chrome:

Так что моя проблема в том, что когда я экспортирую в pdf через wkhtmltopdf, я получаю тот же результат, что и файл «raw». Если яперейдите по ссылке на страницу, которую я экспортирую, все отображается нормально ...

Понятия не имею, что делать и с чего начатьрешить эту проблему.

---

РЕДАКТИРОВАТЬ

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';

И 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>