在此处检查此示例: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>