Мне нужно экспортировать несколько радарных карт (SVG, визуализированных с помощью D3) в стандартизированный формат, который не зависит от текущего размера визуализированного SVG. Какой лучший способ выполнить этот экспорт?
Мой текущий подход:
Я открываю новую вкладку с заранее заданным макетом для экспорта.
Поскольку у меня есть несколько диаграмм в виде SVG, я создаю PNG для каждой диаграммы и помещаю их в холст, который затем снова экспортирую в формате PNG. После рендеринга export-canvas я загружаю изображение.
Моя проблема:
Этот метод работает только для некоторых браузеров (IE и Edge не работают правильно по неизвестным причинам), и новая вкладка вызывает беспокойство.
Есть ли способ скрыть рендеринг экспорта-макета? Я использую приложение Nuxt (Vue) с бэкэндом Python. Я также подумал о том, чтобы загрузить холст через серверную часть и вернуть его клиенту (браузеру) -> но у меня нет опыта в просмотре веб-страниц.
Как бы вы решили эту проблему?
Любая помощь высоко ценится!
Большое спасибо
Редактировать: Когда я копирую код SVG из браузера-dev-tools, я получаю следующее:
<svg width="411.25" height="376.25" class="chart" id="svg-chart3"><g transform="translate(206.125,173.125)"><defs><filter id="glow"><feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur><feMerge><feMergeNode in="coloredBlur"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g class="axisWrapper"><circle class="gridCircle" r="128.125" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url("#glow");"></circle><circle class="gridCircle" r="106.77083333333334" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url("#glow");"></circle><circle class="gridCircle" r="85.41666666666667" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url("#glow");"></circle><circle class="gridCircle" r="64.0625" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url("#glow");"></circle><circle class="gridCircle" r="42.708333333333336" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url("#glow");"></circle><circle class="gridCircle" r="21.354166666666668" style="fill: rgb(205, 205, 205); stroke: rgb(205, 205, 205); fill-opacity: 0.1; filter: url("#glow");"></circle><text class="axisLabel" x="4" y="-128.125" dy="0.4em" fill="#737373" style="font-size: 10px;">6</text><text class="axisLabel" x="4" y="-106.77083333333333" dy="0.4em" fill="#737373" style="font-size: 10px;">5</text><text class="axisLabel" x="4" y="-85.41666666666667" dy="0.4em" fill="#737373" style="font-size: 10px;">4</text><text class="axisLabel" x="4" y="-64.0625" dy="0.4em" fill="#737373" style="font-size: 10px;">3</text><text class="axisLabel" x="4" y="-42.708333333333336" dy="0.4em" fill="#737373" style="font-size: 10px;">2</text><text class="axisLabel" x="4" y="-21.354166666666668" dy="0.4em" fill="#737373" style="font-size: 10px;">1</text><g class="axis"><line x1="0" y1="0" x2="8.629932912741504e-15" y2="-140.9375" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="9.806741946297165e-15" y="-160.15625" style="font-size: 11px;"><tspan x="9.806741946297165e-15" y="-160.15625" dy="0.35em">Opportunity/Bid</tspan><tspan x="9.806741946297165e-15" y="-160.15625" dy="1.75em">Support- Banking</tspan></text></g><g class="axis"><line x1="0" y1="0" x2="90.59287874019664" y2="-107.96438870208097" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="102.94645311385982" y="-122.68680534327382" style="font-size: 11px;"><tspan x="102.94645311385982" y="-122.68680534327382" dy="0.35em">Webauftritt</tspan></text></g><g class="axis"><line x1="0" y1="0" x2="138.79634269015807" y2="-24.473540039933" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="157.72311669336145" y="-27.810840954469317" style="font-size: 11px;"><tspan x="157.72311669336145" y="-27.810840954469317" dy="0.35em">Produktschulung</tspan></text></g><g class="axis"><line x1="0" y1="0" x2="122.05545534586933" y2="70.46874999999997" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="138.69938107485152" y="80.07812499999997" style="font-size: 11px;"><tspan x="138.69938107485152" y="80.07812499999997" dy="0.35em">Produkt Marketing</tspan></text></g><g class="axis"><line x1="0" y1="0" x2="48.20346394996145" y2="132.43792874201395" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="54.776663579501644" y="150.49764629774313" style="font-size: 11px;"><tspan x="54.776663579501644" y="150.49764629774313" dy="0.35em">Sales Enablement</tspan></text></g><g class="axis"><line x1="0" y1="0" x2="-48.20346394996143" y2="132.43792874201398" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="-54.77666357950163" y="150.49764629774316" style="font-size: 11px;"><tspan x="-54.77666357950163" y="150.49764629774316" dy="0.35em">Opportunity/Bid</tspan><tspan x="-54.77666357950163" y="150.49764629774316" dy="1.75em">Support</tspan></text></g><g class="axis"><line x1="0" y1="0" x2="-122.0554553458693" y2="70.46875000000004" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="-138.6993810748515" y="80.07812500000006" style="font-size: 11px;"><tspan x="-138.6993810748515" y="80.07812500000006" dy="0.35em">Funnel und</tspan><tspan x="-138.6993810748515" y="80.07812500000006" dy="1.75em">Contract (Change)</tspan><tspan x="-138.6993810748515" y="80.07812500000006" dy="3.15em">Mngt.</tspan></text></g><g class="axis"><line x1="0" y1="0" x2="-138.79634269015807" y2="-24.47354003993295" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="-157.72311669336145" y="-27.810840954469263" style="font-size: 11px;"><tspan x="-157.72311669336145" y="-27.810840954469263" dy="0.35em">Configuration</tspan><tspan x="-157.72311669336145" y="-27.810840954469263" dy="1.75em">Mngt.</tspan></text></g><g class="axis"><line x1="0" y1="0" x2="-90.59287874019665" y2="-107.96438870208095" class="line" style="stroke: white; stroke-width: 2px;"></line><text class="legend" text-anchor="middle" dy="0.35em" x="-102.94645311385983" y="-122.6868053432738" style="font-size: 11px;"><tspan x="-102.94645311385983" y="-122.6868053432738" dy="0.35em">Channel Partner</tspan><tspan x="-102.94645311385983" y="-122.6868053432738" dy="1.75em">Mgmt.</tspan></text></g></g><g class="radarWrapper"><path class="radarArea" d="M0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0" style="fill: rgb(255, 99, 132); fill-opacity: 0.35;"></path><path class="radarStroke" d="M0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0C0,0,0,0,0,0" style="stroke-width: 2px; stroke: rgb(255, 99, 132); fill: none; filter: url("#glow");"></path></g><g class="radarWrapper"><path class="radarArea" d="M0,0C3.504958148741365,10.059064645456237,14.865331955788124,-7.267139905040352,21.02974889244819,-3.7081121272625763C27.194165829108258,-0.14908434948480087,36.83968219673499,10.702971558940018,36.9865016199604,21.354166666666654C37.13332104318581,32.00536177439329,30.509600749771913,57.06930201697533,21.910665431800663,60.19905851909725C13.311730113829414,63.32881502121917,-4.790915779240255,46.60685432146993,-14.607110287867098,40.13270567939817C-24.42330479649394,33.65855703732641,-28.90614555504748,29.89700701019766,-36.98650161996039,21.354166666666682C-45.066857684873305,12.811326323135704,-66.96596465591887,-4.8389351519371715,-63.08924667734458,-11.124336381787701C-59.21252869877029,-17.40973761163823,-24.241068194738745,-7.535213442734456,-13.726193748514646,-16.358240712436505C-3.2113193022905495,-25.181267982138554,-2.287698958085774,-66.78887345207275,0,-64.0625C2.287698958085774,-61.33612654792725,-3.504958148741365,-10.059064645456237,0,0" style="fill: rgb(57, 110, 255); fill-opacity: 0.35;"></path><path class="radarStroke" d="M0,0C3.504958148741365,10.059064645456237,14.865331955788124,-7.267139905040352,21.02974889244819,-3.7081121272625763C27.194165829108258,-0.14908434948480087,36.83968219673499,10.702971558940018,36.9865016199604,21.354166666666654C37.13332104318581,32.00536177439329,30.509600749771913,57.06930201697533,21.910665431800663,60.19905851909725C13.311730113829414,63.32881502121917,-4.790915779240255,46.60685432146993,-14.607110287867098,40.13270567939817C-24.42330479649394,33.65855703732641,-28.90614555504748,29.89700701019766,-36.98650161996039,21.354166666666682C-45.066857684873305,12.811326323135704,-66.96596465591887,-4.8389351519371715,-63.08924667734458,-11.124336381787701C-59.21252869877029,-17.40973761163823,-24.241068194738745,-7.535213442734456,-13.726193748514646,-16.358240712436505C-3.2113193022905495,-25.181267982138554,-2.287698958085774,-66.78887345207275,0,-64.0625C2.287698958085774,-61.33612654792725,-3.504958148741365,-10.059064645456237,0,0" style="stroke-width: 2px; stroke: rgb(57, 110, 255); fill: none; filter: url("#glow");"></path></g><g class="radarWrapper"><path class="radarArea" style="fill: rgb(142, 199, 44); fill-opacity: 0.35;"></path><path class="radarStroke" style="stroke-width: 2px; stroke: rgb(142, 199, 44); fill: none; filter: url("#glow");"></path></g><g class="radarWrapper"><path class="radarArea" style="fill: rgb(255, 155, 78); fill-opacity: 0.35;"></path><path class="radarStroke" style="stroke-width: 2px; stroke: rgb(255, 155, 78); fill: none; filter: url("#glow");"></path></g><g class="radarCircleWrapper"><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle></g><g class="radarCircleWrapper"><circle class="radarInvisibleCircle" r="4.5" cx="3.922696778518866e-15" cy="-64.0625" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="0" cy="0" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="21.02974889244819" cy="-3.708112127262575" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="36.9865016199604" cy="21.354166666666657" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="21.91066543180066" cy="60.19905851909725" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="-14.6071102878671" cy="40.13270567939817" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="-36.98650161996039" cy="21.35416666666668" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="-63.08924667734458" cy="-11.124336381787705" style="fill: none; pointer-events: all;"></circle><circle class="radarInvisibleCircle" r="4.5" cx="-13.726193748514644" cy="-16.358240712436505" style="fill: none; pointer-events: all;"></circle></g><g class="radarCircleWrapper"></g><g class="radarCircleWrapper"></g><text class="tooltip" style="opacity: 0;"></text></g></svg>
Затем я создаю изображение с помощью saveSvgAsPng и помещаю его на холст.