Canvg-使用缩放时SVG溢出

时间:2019-03-22 14:47:39

标签: javascript html svg canvg

在此处检查此示例:https://jsfiddle.net/znbptw0c/

该SVG是从amCharts库中提取的。

但是当我在SVG上使用canvg和transform : scale将其更改为画布图像时,它会切掉缩放的部分,我该如何解决?

我使用缩放比例是因为我需要提高分辨率,而不仅仅是尺寸。

直接更改SVG宽度/高度并不理想,因为这可能会在更大的范围内破坏某些对齐方式,我希望字体大小也能增加。

JS:

function svgToCanvas(svg){
  const canvas = document.createElement('canvas');
  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
  canvg(canvas, svg.outerHTML);
  window.open(canvas.toDataURL("image/png",1.0))
  return canvas;
}
const svg = document.body.querySelector('svg');
svgToCanvas(svg)

HTML(太大,请检查小提琴):

<svg version="1.1" style="position: absolute; width: 1366px; height: 693px; top: 0px; left: 0px;transform: scale(1.5);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
</svg>

0 个答案:

没有答案