Use javascript to overlap two svgs and save the file

Question

Use javascript to overlap two svgs and save the file

Can I load two SVGs using JavaScript? For example, then use the first SVG as the base and the second SVG as the icon in the corner, and then scale the combination as one and save as one SVG?

+4

javascript html5 svg

Noitidart Sep 08 '15 at 8:03

source share

2 answers

Kaiido · Answer 1 · 2015-09-08T08:49:56+0000

Yes, you can add an item <svg>to svgDocument:

var svgDocs = document.querySelectorAll('svg');
svgDocs[0].appendChild(svgDocs[1]);
svgDocs[1].width.baseVal.value/=3;
svgDocs[1].height.baseVal.value/=3;

svg{ border:1px solid}

<svg version ="1.1" id="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" height="250" width="250">
  <circle cx="60" cy="60" r="50" fill="pink"/>
</svg>

<svg version ="1.1" id="second" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" height="250" width="250">
  <rect x="10" y="10" width="100" height="100" fill="green"/>
</svg>