是否可以使用javascript将两个SVG文件混合在一个文件中，从而生成HTML/HTML5？
我正在创建一个软件，它使用嵌入式浏览器来显示SVG文件（带有SVG的HTML/HTML5） 很多SVG文件都有很多共同点，所以我希望避免将这一部分复制到所有SVG文件中。我想提供一个要扩展/包含的基本SVG。让我们将基本SVG称为“base.SVG” 我在SVG中搜索了类似INCLUDE的东西，但它不存在 是否可以创建包含HTML5链接元素的HTML文件，或包含base.svg的javascript代码？ 然后我简单地将SVG的其余部分放在HTML中。类似这样的内容（伪）： Ps：我知道图像遮罩的坐标不是很好。别理它。这只是一个测试。是否可以使用javascript将两个SVG文件混合在一个文件中，从而生成HTML/HTML5？,javascript,html,svg,Javascript,Html,Svg,我正在创建一个软件，它使用嵌入式浏览器来显示SVG文件（带有SVG的HTML/HTML5） 很多SVG文件都有很多共同点，所以我希望避免将这一部分复制到所有SVG文件中。我想提供一个要扩展/包含的基本SVG。让我们将基本SVG称为“base.SVG” 我在SVG中搜索了类似INCLUDE的东西，但它不存在 是否可以创建包含HTML5链接元素的HTML文件，或包含base.svg的javascript代码？ 然后我简单地将SVG的其余部分放在HTML中。类似这样的内容（伪）： Ps：我知道图像遮罩
干杯 我假设您可以访问XML DOM。如果是这样，合并svg的最佳方法是通过XMLDOM方法
EDIT (added below) UPDATE: added xlink namespace, needed for image elements
XMLHttpRequest <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Combine/Parse SVG Files via XML DOM</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:0px;font-family:arial'>
<center><h4>Combine/Parse SVG Files via XML DOM</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Load svg files as XML via <b>XMLHttpRequest</b>. Parse the Document Elements to create a client's file.
This example first loads the <b>Base.svg</b> inline into a DIV, then extracts/adds elements from another <b>companion</b> svg file,
combining them into a seamless svg root.
</div>
<br />Base + Companion SVG:
<textarea id=svgValue style='width:90%;height:200px;font-size:120%;font-family:lucida console;'></textarea>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;' ></div>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<script id=myScript>
/*
Base.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="baseSVG" width="400" height="400">
<circle r="50" fill="green" cx="100" cy="100" stroke="none" />
</svg>
companion.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="companionSVG">
<rect x="180" y="200" width="200" height="150" fill="red" />
<ellipse cx="70" cy="300" rx="65" ry="25" fill="blue" />
<image x="120" y="100" xlink:href="myImage.png" width="198" height="65" />
</svg>
*/
//--onload---
function loadBaseSVGInline()
{
var SVGFile="Base.svg"
var loadXML = new XMLHttpRequest;
function handler(){
if(loadXML.readyState == 4 && loadXML.status == 200)
{
svgDiv.innerHTML=loadXML.responseText
loadCompanionXML()
}
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
var XMLdoc
function loadCompanionXML()
{
var SVGFile="companion.svg"
var loadXML = new XMLHttpRequest;
function handler()
{
if(loadXML.readyState == 4 && loadXML.status == 200)
{
//---responseText---
var xmlString=loadXML.responseText
//---DOMParser---
var parser = new DOMParser();
XMLdoc=parser.parseFromString(xmlString,"text/xml").documentElement;
companionXML2Base()
}
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
//--place companion elements into base
function companionXML2Base()
{
var mySVG=document.getElementsByTagName("svg")[0]
var elems=XMLdoc.childNodes
for(var k=0;k<elems.length;k++)
{
var elem=elems.item(k).cloneNode(true)
mySVG.appendChild(elem)
}
svgValue.value=svgDiv.innerHTML
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
loadBaseSVGInline()
jsValue.value=myScript.text
}
</script>
</body>
</html>
通过XML DOM组合/解析SVG文件
通过XML DOM组合/解析SVG文件
通过XMLHttpRequest将svg文件作为XML加载。解析文档元素以创建客户端文件。
本例首先将Base.svg内联加载到一个DIV中，然后从另一个伴生svg文件中提取/添加元素，
将它们组合成一个无缝的svg根目录。
基本+配套SVG：
Javascript:
/*
Base.svg
companion.svg
*/
//--装载---
函数loadBaseSVGInline（）
{
var SVGFile=“Base.svg”
var loadXML=newXMLHttpRequest；
函数处理程序（）{
if（loadXML.readyState==4&&loadXML.status==200）
{
svgDiv.innerHTML=loadXML.responseText
loadCompanionXML（）
}
}
if（loadXML！=null）{
loadXML.open（“GET”，SVGFile，true）；
loadXML.onreadystatechange=handler；
loadXML.send（）；
}
}
var XMLdoc
函数loadCompanionXML（）
{
var SVGFile=“companion.svg”
var loadXML=newXMLHttpRequest；
函数处理程序（）
{
if（loadXML.readyState==4&&loadXML.status==200）
{
//---响应文本---
var xmlString=loadXML.responseText
//---DOMParser---
var parser=新的DOMParser（）；
XMLdoc=parser.parseFromString（xmlString，“text/xml”）.documentElement；
公司xml2base（）
}
}
if（loadXML！=null）{
loadXML.open（“GET”，SVGFile，true）；
loadXML.onreadystatechange=handler；
loadXML.send（）；
}
}
//--将配套元件放入底座中
函数companionXML2Base（）
{
var mySVG=document.getElementsByTagName（“svg”）[0]
var elems=XMLdoc.childNodes
对于（var k=0；kCan't you don’t overlay the SVG？include in SVG是由
元素完成的。这是否涵盖了您需要的内容？如果没有，您能否澄清您正在寻找的内容？据我所知，该元素无法引用其他文件。我错了吗？我想使用类似于C/C++include指令的东西。我有一个巨大的SVG定义文件和一个很多使用这些定义的小型SVG文件。我不想有很多大型SVG文件，它们之间有一个巨大的公共部分（很难维护）。你错了，
可以引用另一个文件。虽然我认为Firefox可以，但Chrome还没有实现。好的，但是如何实现呢？我应该为SVG标记创建一个内部标记，并用base.SVG文件中的def填充该标记吗？你确定它可以工作吗？加载后SVG会理解缺少的引用吗使用dom方法？让我看看是否可以从一个例子开始…很抱歉，我最初没有这样做，但我现在正在移动。别担心。我真的很感激你的回答。如果我听起来不感谢你，我很抱歉。我做了一些测试。使用JS，我创建了一个新元素，将其类型设置为“image/svg+xml”并将其数据属性设置为我要加载的svg文件。它不起作用（文件未实际加载）。我正在尝试获取一些信息。你是我的英雄！你的示例超出了任何预期。非常感谢。我想你花了一些时间来做这件事。我非常感谢。再次感谢。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="w3.org/1999/xlink" id="baseSVG" width="400" height="400" fill="white">
<circle r="50" fill="green" cx="50" cy="50" stroke="none" />
<g id="childSVG" />
</svg>
<defs>
<image id="bkimage" xlink:href="http://placepuppy.it/320/240" width="100%" height="100%" />
<rect id="MyRect" width="100" height="100" stroke="black" stroke-width="2" />
</defs>
<g>
<defs>
<mask id="image1mask" ><polygon points="0,0, 320,0, 160,120, 320,240, 0,240" fill-opacity="30%" /></mask>
</defs>
<use xlink:href="#bkimage" mask="url(#image1mask)"/>
</g>
<use xlink:href="#MyRect" x="100" y="100" fill="red" />
<use xlink:href="#MyRect" x="150" y="150" fill="blue" />
<use xlink:href="#MyRect" x="200" y="200" fill="green" />
<g>
<defs>
<clipPath id="MyRectClip"><rect x="270" y="270" width="60" height="60" /></clipPath>
</defs>
<rect x="250" y="250" width="100" height="100" stroke="black" stroke-width="2" fill="yellow" clip-path="url(#MyRectClip)"/>
</g>
http://theHTMLfile?svg=companion.svg&destination=childSVG
EDIT (added below) UPDATE: added xlink namespace, needed for image elements
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Combine/Parse SVG Files via XML DOM</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:0px;font-family:arial'>
<center><h4>Combine/Parse SVG Files via XML DOM</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Load svg files as XML via <b>XMLHttpRequest</b>. Parse the Document Elements to create a client's file.
This example first loads the <b>Base.svg</b> inline into a DIV, then extracts/adds elements from another <b>companion</b> svg file,
combining them into a seamless svg root.
</div>
<br />Base + Companion SVG:
<textarea id=svgValue style='width:90%;height:200px;font-size:120%;font-family:lucida console;'></textarea>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;' ></div>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<script id=myScript>
/*
Base.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="baseSVG" width="400" height="400">
<circle r="50" fill="green" cx="100" cy="100" stroke="none" />
</svg>
companion.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="companionSVG">
<rect x="180" y="200" width="200" height="150" fill="red" />
<ellipse cx="70" cy="300" rx="65" ry="25" fill="blue" />
<image x="120" y="100" xlink:href="myImage.png" width="198" height="65" />
</svg>
*/
//--onload---
function loadBaseSVGInline()
{
var SVGFile="Base.svg"
var loadXML = new XMLHttpRequest;
function handler(){
if(loadXML.readyState == 4 && loadXML.status == 200)
{
svgDiv.innerHTML=loadXML.responseText
loadCompanionXML()
}
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
var XMLdoc
function loadCompanionXML()
{
var SVGFile="companion.svg"
var loadXML = new XMLHttpRequest;
function handler()
{
if(loadXML.readyState == 4 && loadXML.status == 200)
{
//---responseText---
var xmlString=loadXML.responseText
//---DOMParser---
var parser = new DOMParser();
XMLdoc=parser.parseFromString(xmlString,"text/xml").documentElement;
companionXML2Base()
}
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
//--place companion elements into base
function companionXML2Base()
{
var mySVG=document.getElementsByTagName("svg")[0]
var elems=XMLdoc.childNodes
for(var k=0;k<elems.length;k++)
{
var elem=elems.item(k).cloneNode(true)
mySVG.appendChild(elem)
}
svgValue.value=svgDiv.innerHTML
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
loadBaseSVGInline()
jsValue.value=myScript.text
}
</script>
</body>
</html>