Блог

Мне удалось загрузить мое дерево D3JS в виде SVG-файла, который помещается в поле просмотра при просмотре в Inkscape, используя приведенный ниже код:

 // This event is used to download SVG document
   $('#download-SVG').click(function() {
    var svgElement = document.querySelector('svg');
    var svgWH = svgElement.getBBox();

    var canvasWidth = svgWH.width;
    var canvasHeight = svgWH.height;

   var groupElement = document.getElementById('fg');
   groupElement.setAttribute("transform", "translate(0,0)scale(.7,.7)");
   const bb = groupElement.getBBox();
   console.log('svg.x' svgWH.x ' svg.y ' svgWH.y ' svg.width ' svgWH.width ' svg.height ' svgWH.height);
   console.log('bb.x ' bb.x ' bb.y ' bb.y ' bb.width ' bb.width ' bb.height ' bb.height);

    //clone the svg to avoid destroying it while appending to the svg namespace
    let clonedSvgElement = svgElement.cloneNode(true);

    var svgContent = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgContent.setAttribute('viewBox',' ' bb.x ' ' bb.y '  ' bb.width ' ' bb.height);
    
    svgContent.setAttribute("width", "100%");
    svgContent.setAttribute("height", "100%");
    svgContent.setAttribute("preserveAspectRatio", "xMidYMid meet");

    svgContent.appendChild(clonedSvgElement); //use the cloned nodes
    var dl = document.createElement('a');
    document.body.appendChild(dl);
    dl.setAttribute("href", svgDataURL(svgContent)); //function svgDataURL expects a node
    dl.setAttribute("download", "test.svg");
    dl.click();
    dl.remove();
    svgContent.removeChild(clonedSvgElement);
    //bring back to original position
    groupElement.setAttribute("transform", 'translate(' margin.left ',' margin.top ')scale(.7)');
   });

   function svgDataURL(svg) {
    var svgAsXML = (new XMLSerializer).serializeToString(svg);
    var dataURL = "data:image/svg xml,"   encodeURIComponent(svgAsXML);
    return dataURL;
   }
  

Содержимое файла SVG:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox=" -165 -22  430 412" width="100%" height="100%"
preserveAspectRatio="xMidYMid meet"><svg width="5000" height="1020" class="custom-translate">
    <g id="fg" transform="translate(0,0)scale(.7,.7)">
        <path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 -115,285 -115,375" />
        <path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 -5,285 -5,375" />
        <path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 105,285 105,375" />
        <path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 215,285 215,375" />
        <path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,15C50,105 50,105 50,195" />
        <g class="node" transform="translate(165,360)">
            <rect width="100" height="30"
                style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(176, 196, 222);" /><text x="50" y="15"
                dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Sixth</text></g>
        <g class="node" transform="translate(55,360)">
            <rect width="100" height="30"
                style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255);" /><text x="50" y="15"
                dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Fifth</text></g>
        <g class="node" transform="translate(-55,360)">
            <rect width="100" height="30"
                style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255);" /><text x="50" y="15"
                dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Fourth</text></g>
        <g class="node" transform="translate(-165,360)">
            <rect width="100" height="30"
                style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(176, 196, 222);" /><text x="50" y="15"
                dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Third</text></g>
        <g class="node" transform="translate(0,180)">
            <rect width="100" height="30"
                style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255);" /><text x="50" y="15"
                dy=".35em" text-anchor="middle" style="fill-opacity: 1;">Second</text></g>
        <g class="node" transform="translate(0,0)">
            <rect width="100" height="30"
                style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(255, 255, 255);" /><text x="50" y="15"
                dy=".35em" text-anchor="middle" style="fill-opacity: 1;">First</text>
            <image xmlns:ns1="http://www.w3.org/1999/xlink" ns1:href="images/information.png" x="85px" y="-22px"
                width="24px" height="24px" />
        </g>
    </g>
</svg></svg>
  

смотрю на консоль.вывод журнала показывает следующее:

 svg.x584.5 svg.y 9.600000381469727 svg.width 301 svg.height 288.3999938964844
bb.x -165 bb.y -22 bb.width 430 bb.height 412
  

Однако вокруг графика есть пробелы, которые я не могу удалить. Я подозреваю, что это связано с размером SVG по сравнению с размером элемента group.