更新： Robert Longson在下面的评论中指出，该代码尚未硬化并且几乎可以肯定会失败的一种方式，是在插入具有相同
我有几个SVG的文件夹，所有这些文件夹我都试图将其包含在我的HTML文件中。
我正在使用Paper.js库来分析SVG，据我所知，它的唯一方法是使用<svg> TAG - 因此，请使用<object>或CC_2 WON'导入SVGS'工作。
我正在尝试找到一种系统的方法，以便我不必从每个单独的文件（100 ）复制所有SVG代码。
您知道这是否可能吗？您对潜在替代方案有任何建议吗？
您是否使用Windows，Mac或Linux？
假设窗口，您不能只是将所有内容复制到一个文件中吗？例如：
copy *.svg index.html
然后编辑index.html，因此具有<html>和<body>标签等。
svg文件只是文本，所以我认为您需要做的就是加入所有文件。
MacOS/Linux也很容易。我认为您只能将它们全部 cat纳入这样的文件：
cat *.svg > index.html
，但也许有一种更干净的方法。
从不使用paper.js库玩，因此无法确认此技术是否表现出任何皱纹。基本上，我会采用Jaromanda X提到的相同方法，并让页面通过Ajax绘制所需的所有图像。您需要添加错误检查并确保代码强大 - 我什至没有尝试过，只是提供代码，这些代码在所有情况下都是在预期的。我从localhost服务，图像与HTML文件相同。（从本地文件系统中服役，由于检索SVG时的交叉原始请求而失败）
更新： Robert Longson在下面的评论中指出，该代码尚未硬化并且几乎可以肯定会失败的一种方式，是在插入具有相同
id的多个图像。如果图像未通过其id找到，则代码可能会产生可用的输出。但是，每当同一ID出现不止一次时，它将始终产生无效的标记。
潜在的工作是将所有图像加载到屏幕外集合中，然后再处理任何图像。然后，您可以检查id s的冲突并更改那些重复已经有效的冲突。
loadsvgs.html
<!DOCTYPE html>
<html>
<head>
<script>
function newEl(tag){return document.createElement(tag);}
window.addEventListener('load', mInit, false);
var filenames = ['blueBomb.svg','cpBob.svg'];
function ajaxGet(url, onLoad, onError)
{
var ajax = new XMLHttpRequest();
ajax.onload = function(){onLoad(this);}
ajax.onerror = function(){console.log("ajax request failed to: "+url);onError(this);}
ajax.open("GET",url,true);
ajax.send();
}
function mInit()
{
filenames.forEach( loadImage );
}
function loadImage(filename)
{
ajaxGet(filename, onLoaded, onFailed);
}
function onLoaded(ajax)
{
var div = newEl('div');
div.innerHTML = ajax.responseText;
document.body.appendChild(div);
}
function onFailed(ajax)
{
console.log('bugger!');
}
</script>
<style>
</style>
</head>
<body>
</body>
</html>