可以使用javascript将两个SVG文件混合在一起，从而生成HTML/HTML5
Is is possible to use javascript to mix 2 SVG files in one resulting an HTML/HTML5?
我正在创建一个使用嵌入式浏览器显示SVG文件(HTML/HTML5 with SVG)的软件。
许多SVG文件都有很多共同之处，所以我希望避免将这部分复制到所有SVG文件中。我想提供一个扩展/包含的基本SVG。让我们将基础SVG命名为"base. SVG"。
我搜索了类似于INCLUDE in SVG的东西，但它不存在。
是否有可能创建一个HTML文件，其中有一个HTML5链接元素，或javascript代码，以包括base.svg?然后，我只需将SVG的其余部分放在HTML中。像这样(伪):
<html>
<body>
<link rel="import" href="base.svg" />
<!-- or some javascript code to include the base.svg content -->
<svg>
<!-- The rest of the SVG -->
</svg>
</body>
</html>
有可能吗?如果不是，使用PHP服务器(或类似的东西)动态生成完整的SVG (result = base.svg + rest.svg)是不是一个好的选择?
非常感谢。
===解决方案(基于Francis Hemsher方法):
HTML文件:<!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:100px;font-size:120%;font-family:lucida console;'></textarea>
<div id="svgDiv" style='background-color:white;width:400px;height:400px;' ></div>
<br />
Parameters:
<br />
<textarea id=jsParams 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:40px'></textarea>
<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="parameterRetrieval">
var params = new Array();
function queryParameters() {
var query = window.location.search.substring(1);
var lParams = query.split('&');
for (var i = 0; i < lParams.length; ++i) {
var pos = lParams[i].indexOf('=');
if (pos > 0) {
var key = lParams[i].substring(0, pos);
var val = lParams[i].substring(pos + 1);
params[key] = val;
console.log("params[ " + key + " ] = '"" + val + "'"");
}
}
}
function getParameterByName(key) {
return params[key];
}
</script>
<script id="SVGComposer">
var XMLdoc;
function loadCompanionXML() {
// Element inside the base SVG file to hold the companion SVG content.
var destElement = getParameterByName("destination");
// Companion SVG name.
var SVGFile = getParameterByName("svg");
if (SVGFile == null) {
console.log("Missing parameter: child svg file (svg).");
return;
}
var loadXML = new XMLHttpRequest;
function handler() {
if ((loadXML.readyState == 4) && (loadXML.status == 200)) {
var childSVG = document.getElementById(destElement);
if (childSVG != null) {
childSVG.innerHTML = loadXML.responseText;
svgValue.value=svgDiv.innerHTML;
} else {
console.log("Could not get the child SVG container.");
}
}
}
if (loadXML != null) {
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
document.addEventListener("onload", init(), false);
function init() {
queryParameters();
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();
}
jsValue.value = SVGComposer.text;
}
</script>
</body>
</html>
base.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>
companion.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
Ps:我知道图像蒙版的坐标不是很好。忽略这一点。这只是一个测试。干杯!
我假设您可以访问XML DOM。如果是这样，合并svg的最佳方法是通过xml dom方法。
EDIT (added below) UPDATE: added xlink namespace, needed for image elements
下面是在客户机上将svg文件合并为单个内联svg的非常基本的方法。如果它可以通过XML DOM组合/解析SVG文件。
通过XMLHttpRequest加载svg文件为XML。解析Document Elements以创建客户端文件。本例首先将Base.svg内联加载到DIV中，然后从另一个同伴.svg文件中提取/添加元素。将它们组合成一个无缝的SVG根。
<!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>
相关文章：
- 将依赖外部库的UMD模块与browserfy捆绑在一起
- 如何将具有相同功能的两个select html标签的两个JS组合在一起
- angularjs在数字(html5）字段中将0转换为1
- 将3个函数合并在一起
- 使用javascript将两个输入的日期添加在一起
- 避免将lib依赖项与webpack+handlebas加载程序捆绑在一起
- PHP、Javascript和SQL代码混杂在一起
- 有没有办法把它们串在一起，这样它们基本上可以同时工作
- PHP:同时循环元素粘在一起
- 把两个数字加在一起，得到5+10=510，而不是15
- 我怎样把这些剧本写在一起
- 安全地包装JS文件，这样当它们连接在一起时，它们仍然可以工作
- 在Javascript HTML5+Canvas中处理精灵鼠标点击的最佳方式
- 如何将遗留的js文件与webpack捆绑在一起
- 在 JavaScript 中使用侦听器将输入字段链接在一起
- 如何将表链接在一起
- 如何有效地匹配两个不同 JavaScript 对象上的 id，并将它们合并在一起
- 如何组在一起HTML5范围滑块值
- 连接在一起nodejs html5和画布
- 可以使用javascript将两个SVG文件混合在一起，从而生成HTML/HTML5
