Question

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

Answer 1

是的，您可以将<svg>元素附加到svgDocument中：

＆＃13;

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

＆＃13;

svg{ border:1px solid}

＆＃13;

<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>

＆＃13;

Answer 2

逐步：

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

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

2 个答案:

逐步：