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

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

逐步： 0:使用以下内容加载资源：

1：根据需要使用变换缩放、平移：

2：将最终的复合SVG元素转换为文件use/modify，我从下面的 或更好的讨论：

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

我的工作：（需要重构，但需要链接，以防有助于理解HTML SVG API）：

---

是的，您可以将

元素附加到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}

听起来你可以用一些CSSThanks@star尖叫1984来做到这一点。你能演示一下我在Illustrator中做的事情吗？我可以用我最喜欢的编程语言来做这件事真是令人兴奋。我不知道你说的“保存”是什么意思？你想从另外两个SVG中创建第三个SVG吗？谢谢@SPRBRN yep我想拿个底座，缩放到128x128，然后拿个徽章，缩放到其中的1/3，放在角落里，然后将其保存为单个SVG到文件。非常感谢@kaido，你能演示一下使用外部SVG文件吗，比如说一个位于路径“blah.SVG”处另一个在“badge.svg”上。可以在这里做一些
FileReader
的工作吗？或者在此基础上创建
URL.createObjectURL
？比如这个JSFIDLE：当然，您也可以使用文件阅读器，但是如果您有URL，那么xhr将是一个更好的选择。。。但是无论如何，最简单的方法是使用
或
：@Noitidart我想我还没有完全达到“另存为新svg”的要求，但是现在，看看你的小提琴，我想知道：你知道svg文件内容实际上几乎与svgElement.outerHTML相同吗？因此，
（新的XMLSerializer（））.serializeToString（svgDoc）
，将返回一个序列化版本，您可以将其另存为svg文件，但如果需要创建一个完全有效的svg文件（包含doctype和所有内容），则可能需要进一步的操作你可以在PPS中找到它。所以这里有一个新版本的下载器：哇，谢谢你，我要去研究TrIt，现在IM在其他代码的中间，但是会访问，非常感谢你！谢谢你Wylie的撬棍真的很酷！：）我想知道你是否知道它的Firefox版本？也许更好：在这种情况下不需要Blob，一个简单的
var url='data:image/svg+xml；charset=utf8，“+（新的XMLSerializer（））。serializeToString（svgDoc）
应该可以很好地完成这项任务。