Блог

Главная - Вопросы по программированию - Canvg — переполнение SVG при использовании масштаба

Canvg — переполнение SVG при использовании масштаба

#javascript #html #svg #canvg

#javascript #HTML #svg #canvg

Вопрос:

Проверьте этот пример здесь : https://jsfiddle.net/znbptw0c

Этот SVG извлечен из библиотеки amCharts.

Но когда я меняю его на изображение canvas с помощью canvg и transform : scale в SVG, это отсекает масштабированную часть, как я могу это исправить?

Я использую 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 (слишком большой, пожалуйста, проверьте fiddle):

 <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>

Комментарии:

1. Не масштабировать. Используйте это: <svg viewBox="0 0 1366 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> вместо того, что у вас есть сейчас

2. @enxaneta Но мне нужно масштабировать его, чтобы увеличить разрешение, также ваше решение только что сделало очень крошечный вывод

3. Элемент svg принимает размер контейнера. Возможно, проблема в элементе контейнера. Кроме того, вы можете попробовать поиграть с размером шрифта

4. Если вы не возражаете против пустого пространства вокруг диаграммы, вы можете попробовать другое окно просмотра: <svg viewBox="330 0 700 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">