javascript - 使用javascript重叠两个svgs，并保存文件

Question

是否可以使用 JavaScript 加载两个 SVG？例如，然后使用第一个 SVG 作为基础，第二个 SVG 作为 Angular 落的徽章，然后将组合缩放为一个并保存为单个 SVG？

Answer 1

是的，您可以附加 <svg>元素到 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>