Блог

Главная - Вопросы по программированию - Объединить два SVG-элемента в один с помощью Javascript?

Объединить два SVG-элемента в один с помощью Javascript?

#javascript #html #svg #html5-canvas #canvg

#javascript #HTML #svg #html5-canvas #canvg

Вопрос:

Допустим, у меня есть следующий html-контекст, к созданию которого у меня нет доступа :

 <div id="outer">
  <div id="chart-div">
    <svg id="chart"></svg>
  </div>
  <div id="legend-div">
    <svg id="legend"></svg>
  </div>
</div>

Что я пытаюсь сделать, так это экспортировать этот SVG-файл в изображение с помощью библиотеки canvg, проблема здесь в том, что они разделены, и поэтому я получаю два canvas, а библиотека canvg принимает строку определения SVG в качестве входных данных.

Как я могу изменить html-элементы выше, чтобы они были только одним SVG? Используя Javascript, поскольку это расширение для браузера.

Я попытался просто переключить теги DIVs на SVG, но это просто сломало все, и SVG стал пустым

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

1. пожалуйста, приложите пример содержимого svg

2. Более простой способ — объединить два холста в одно изображение

Ответ №1:

Это мое решение вашей проблемы: я создаю внешний div display:none , я создаю другой svg-элемент (вы можете сделать это динамически), заканчивающийся внутри #new svg, который я использую #chart и #legend . Я надеюсь, это поможет.

 svg{border:1px solid;}
#outer {display:none}
#outer div{position:absolute; width:500px;}  
 <div id="outer">
  <div id="chart-div">
    <svg id="chart" viewBox="0 0 300 150">
      <circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20"  />
    </svg>
  </div>
  <div id="legend-div">
    <svg id="legend"  viewBox="0 0 300 150">
      <rect fill="skyBlue" x="200" y="100" width="80" height ="30" />
    </svg>
  </div>
</div>


<svg id="new" viewBox="0 0 300 150" width="500"> 
  <use xlink:href="#chart" />
  <use xlink:href="#legend" />
</svg>

Ответ №2:

Это решение на Javascript для объединения двух доступных svg-файлов в документе посредством манипуляций с DOM.

 var svgNS = "http://www.w3.org/2000/svg";  
var outer = document.getElementById('outer');

// get chart content
var chart = document.getElementById('chart-div');
var chartSvg = chart.getElementsByTagName('svg')[0];
var chartContent = Array.from(chartSvg.childNodes);

// get legend content
var legend = document.getElementById('legend-div');
var legendSvg = legend.getElementsByTagName('svg')[0];
var legendContent = Array.from(legendSvg.childNodes);

// create a merged-div where we are going to merge the svgs
var merged = document.createElement('div');
merged.setAttribute('id', 'merged-div');
outer.appendChild(merged);

// createElementNS for svg
var mergedSvg = document.createElementNS(svgNS, 'svg');
mergedSvg.setAttribute('id', 'merged');
// keep the viewBox of the chart
mergedSvg.setAttribute('viewBox', chartSvg.getAttribute('viewBox'));
merged.appendChild(mergedSvg);

// adding the content of both svgs
for (let i = 0; i < chartContent.length; i  ) {
  mergedSvg.appendChild(chartContent[i]);
}
for (let i = 0; i < legendContent.length; i  ) {
  mergedSvg.appendChild(legendContent[i]);
}

// the unmerged svgs can be removed
chart.remove();
legend.remove();  
 <div id="outer">
  <div id="chart-div">
    <svg id="chart" viewBox="0 0 300 150">
      <circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20"  />
    </svg>
  </div>
  <div id="legend-div">
    <svg id="legend"  viewBox="0 0 300 150">
      <rect fill="skyBlue" x="200" y="100" width="80" height ="30" />
    </svg>
  </div>
</div>

Результирующая разметка:

 
    <div id="outer">
        <div id="merged-div">
            <svg id="merged" viewBox="0 0 300 150">
                <circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20"></circle>
                <rect fill="skyBlue" x="200" y="100" width="80" height="30"></rect>
            </svg>
        </div>
    </div>