Question

我有一个包含几个SVG的文件夹，所有这些我都试图包含在我的HTML文件中。

我正在使用paper.js库来分析SVG，据我所知它的唯一工作方式是使用<svg>标记 - 所以使用{导入svgs {1}}或<object>无效。

我正在尝试找到一种系统的方法来执行此操作，这样我就不必从每个单独的文件（100 +）中复制粘贴所有SVG代码。

你知道这是否可能吗？您对潜在的替代方案有什么建议吗？

Answer 1

您使用的是Windows，Mac还是Linux？

假设Windows，你不能只将所有内容复制到一个文件中吗？ E.g：

copy *.svg index.html

然后编辑index.html，使其包含<html>和<body>标记等。

SVG文件只是文本，所以我认为您需要做的就是连接所有文件。

在MacOS / Linux中也很容易。我想你可以cat将它们全部放到这样的文件中：

cat *.svg > index.html

但也许有一种更清洁的方式。

Answer 2

从未使用paper.js库，因此无法确认此技术是否出现任何皱纹。基本上，我采用了Jaromanda X提到的相同方法，并让页面通过AJAX拉出所需的所有图像。您需要添加错误检查并确保代码是健壮的 - 我甚至没有尝试过这一点，只提供在完全符合预期时运行的代码。我是从localhost投放的，图片与html文件位于同一个文件夹中。（由于检索SVG时的跨源请求，本地文件系统服务失败）

<小时/> 更新：正如罗伯特·朗森在下面的评论中所指出的那样，这种代码尚未加强并且几乎肯定会失败的一种方式是插入具有相同{{1 }}。如果图像未被id定位，则它们的代码可能会产生可用的输出。但是，只要同一个ID出现不止一次，总会产生无效标记。

潜在的解决方法是在处理任何图像之前将所有图像加载到屏幕外的集合中。然后，您可以检查是否发生冲突id并更改重复已有效的那些。

loadSVGS.html

id

可以将SVG作为<svg>标签导入而不复制粘贴SVG代码吗？

2 个答案:

loadSVGS.html