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

Question

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

Answer 1

逐步：

0：加载您的资源： https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

1：根据需要使用变换来缩放、平移： https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform

2：要将最终的复合 SVG 元素转换为文件，请使用/修改 https://github.com/NYTimes/svg-crowbar，这是我从 Convert JavaScript-generated SVG to a file 中找到的 或更好的讨论： Generating, viewing, and saving SVG client-side in browser

免责声明：我没有测试过这种方法，所以不能保证，但在过去的几个月里，我以编程方式使用 SVG 做了很多工作，我认为它会奏效。

我的工作：（需要重构但链接以防它有助于理解 HTML SVG API）： https://github.com/Terebinth/Vickers/blob/master/lib/minesweeper/minesweeper_001_.coffee

Answer 2

是的，您可以将 <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>