如何解决如何将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 举报,一经查实,本站将立刻删除。