Question

我有一个显示d3图表的页面。此页面还支持PDF导出，我正在使用带有SVG-to-PDFKit扩展名的pdfkit库。我遇到的问题是页面上的图形非常大，以填充页面的宽度，但这使得它在生成PDF时太大。我花了很多时间研究如何调整SVG内容的大小（不仅仅是SVG所在的视图），而且似乎并不是SVG-to-PDFKit库中已经创建的函数

我找到了一个有意义的答案，但只有在Chrome工具启动时偶尔才会有效： How can I resize an SVG?

如果有更好的解决方案，我很想知道。我的主要问题是，在在页面上生成之后，必须调整图表的大小，以便它不会使页面上的图形倾斜，而只会改变PDF上的图形。

我偶尔使用的代码是：

var chartSVG = document.getElementById('chartSVG'); chartSVG.setAttribute("style", "viewBox: 0 0 32 32;"); SVGtoPDF(doc, chartSVG, 20, 170);

那里可能还有另一个属性会更好吗？代码行看起来是否正确写入？我不明白为什么它只能在Chrome工具启动时运行。提前谢谢。

Answer 1

您绝对可以使用setAttribute以及style属性或css来调整SVG的大小：

＆＃13;

var red = document.getElementById('red');
red.setAttribute('height', '50');

var green =  document.getElementById('green');
green.style.width = '100px';

＆＃13;

#blue {width:60px}

＆＃13;

<svg id="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="red"/></svg>

<svg id="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="green"/></svg>

<svg id="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="blue"/></svg>

＆＃13;

使用.setAttribute（）调整SVG大小不起作用

1 个答案: