如何将svg与viewBox对齐以生成可变大小的树

问题描述

我有一个D3JS树，并设法将其下载为SVG文件。使用以下代码，我设法获取了svg大小并相应地设置了viewBox大小（填充2％）。

$('#download-SVG').click(function() {
    var svgElement = document.querySelector('svg');
    let {width,height} = svgElement.getBBox();
    var canvasWidth = Math.ceil(width + (width*.02));
    var canvasHeight = Math.ceil(height + (height*.02));

    var svgContent = document.createElementNS('http://www.w3.org/2000/svg','svg');
    svgContent.setAttribute('viewBox','0 0 '+canvasWidth+' '+canvasHeight);
    svgContent.setAttribute("width","100%");
    svgContent.setAttribute("height","100%");
    svgContent.setAttribute("preserveAspectRatio","xMidYMid meet");
    svgContent.appendChild(svg.node()); 
    .
    .
    }

我的带有少量节点的svg文件的示例是

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308 295" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><g transform="translate(501,21)scale(0.7)"><path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M50,195C50,285 -115,375"/>....</svg>

我的具有多个节点的svg文件的示例是

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1368 3122" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"><g transform="translate(449,36)scale(0.7)"><path class="link" stroke="#ccc" fill="none" stroke-width="2px" d="M352.5,555C352.5,645 22.5,735"/>...</svg>

我现在的问题是，取决于svg的大小（取决于展开或折叠的节点数），svg和viewBox总是不对齐。将树扩展到许多节点，将svg移至左侧，然后折叠到少数节点，然后将svg移至右侧。

我试图设置viewBox的x和y坐标，但是它从未完全对齐并且在所有情况下都使其对齐。

如果我在InkScape中打开svg并将其手动移动到ViewBox，则非常合适。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）