【发布时间】：2017-08-08 10:39:58
【问题描述】：
所以，我的另一个话题被否决了，我不知道为什么。我的问题很清楚，我提供了很多信息。让我们再试一次。
我正在尝试导出 HTML 文档上的所有 <SVG>，但是当我尝试在 Illustrator 或 Inkscape 上打开它时，它不起作用，说文件已损坏。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="svg-converter.js"></script>
<script>
jQuery(document).ready(function($) {
$('.svg-convert').svgConvert();
});
</script>
<style>
#mySVG > svg {
width: 40%;
float: left;
}
</style>
</head>
<body>
<main id="content">
<div id="mySVG">
<img src='https://cdn.kastatic.org/images/avatars/svg/leafers-sapling.svg' class='svg-convert'>
<img src='https://cdn.kastatic.org/images/avatars/svg/aqualine-sapling.svg' class='svg-convert'>
</div>
</main><!-- #main -->
<script>
var exportSVG = function(svg) {
// first create a clone of our svg node so we don't mess the original one
var clone = svg.cloneNode(true);
// parse the styles
parseStyles(clone);
// create a doctype
var svgDocType = document.implementation.createDocumentType('svg', "-//W3C//DTD SVG 1.1//EN", "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd");
// a fresh svg document
var svgDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg', svgDocType);
// replace the documentElement with our clone
svgDoc.replaceChild(clone, svgDoc.documentElement);
// get the data
var svgData = (new XMLSerializer()).serializeToString(svgDoc);
// now you've got your svg data, the following will depend on how you want to download it
// e.g yo could make a Blob of it for FileSaver.js
/*
var blob = new Blob([svgData.replace(/></g, '>\n\r<')]);
saveAs(blob, 'myAwesomeSVG.svg');
*/
// here I'll just make a simple a with download attribute
var a = document.createElement('a');
a.href = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData.replace(/></g, '>\n\r<'));
a.download = 'myAwesomeSVG.svg';
a.innerHTML = 'download the svg file';
document.body.appendChild(a);
};
var parseStyles = function(svg) {
var styleSheets = [];
var i;
// get the stylesheets of the document (ownerDocument in case svg is in <iframe> or <object>)
var docStyles = svg.ownerDocument.styleSheets;
// transform the live StyleSheetList to an array to avoid endless loop
for (i = 0; i < docStyles.length; i++) {
styleSheets.push(docStyles[i]);
}
if (!styleSheets.length) {
return;
}
var defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs');
if (!defs.parentNode) {
svg.insertBefore(defs, svg.firstElementChild);
}
svg.matches = svg.matches || svg.webkitMatchesSelector || svg.mozMatchesSelector || svg.msMatchesSelector || svg.oMatchesSelector;
// iterate through all document's stylesheets
for (i = 0; i < styleSheets.length; i++) {
var currentStyle = styleSheets[i]
var rules;
try {
rules = currentStyle.cssRules;
} catch (e) {
continue;
}
// create a new style element
var style = document.createElement('style');
// some stylesheets can't be accessed and will throw a security error
var l = rules && rules.length;
// iterate through each cssRules of this stylesheet
for (var j = 0; j < l; j++) {
// get the selector of this cssRules
var selector = rules[j].selectorText;
// probably an external stylesheet we can't access
if (!selector) {
continue;
}
// is it our svg node or one of its children ?
if ((svg.matches && svg.matches(selector)) || svg.querySelector(selector)) {
var cssText = rules[j].cssText;
// append it to our <style> node
style.innerHTML += cssText + '\n';
}
}
// if we got some rules
if (style.innerHTML) {
// append the style node to the clone's defs
defs.appendChild(style);
}
}
};
exportSVG(document.getElementById('mySVG'));
</script>
</body>
</html>我正在使用 SVG Convert (https://github.com/madebyshape/svg-convert) 将 .SVG 转换为 <svg>。这部分工作，没有问题。
转换正常，我插入 2 个 .svg 图像，它转换为 2 个<svg>。在这里你可以看到它的工作：http://brand.express/projects/teste/index2.php
当我单击按钮导出 .SVG 时，两个图像都被导出到新的 .SVG 文件中，我可以在浏览器中打开它们。一切都很好。
但我无法在 Illustrator 或 Inkscape 上打开它们。我收到一条消息，指出文件已损坏。
这是导出的 .SVG 的代码：
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<div xmlns="http://www.w3.org/1999/xhtml" id="mySVG">
<defs xmlns="http://www.w3.org/2000/svg"/>
<img src="https://cdn.kastatic.org/images/avatars/svg/leafers-sapling.svg" class="svg-convert" />
<img src="https://cdn.kastatic.org/images/avatars/svg/aqualine-sapling.svg" class="svg-convert" />
</div>我需要将页面内的所有<SVG> 导出到单个 .SVG 文件，并且我需要能够在矢量程序上打开它并对其进行编辑。我不介意导出 HTML 或其他什么，只要我能做到。
Ps.(1)：图像没有附加 CSS，暂时没有对它们进行任何处理。
这是更新后的代码，现在 .SVG 可以在 InKSCAPE 上运行，但它只在文件中导出一个 SVG：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="svg-converter.js"></script>
<script>
jQuery(document).ready(function($) {
$('.svg-convert').svgConvert({
onComplete: function() {
exportSVG(document.getElementById('mySVG'));
}
});
});
</script>
<style>
#mySVG > svg{
width: 40%;
float: left;
}
</style>
</head>
<body>
<main id="content">
<div id="mySVG" xmlns="http://www.w3.org/3000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<img src='https://cdn.kastatic.org/images/avatars/svg/leafers-sapling.svg' class='svg-convert'>
<img src='https://cdn.kastatic.org/images/avatars/svg/aqualine-sapling.svg' class='svg-convert'>
</div>
</main><!-- #main -->
<script>
var exportSVG = function(svg) {
// first create a clone of our svg node so we don't mess the original one
var clone = svg.cloneNode(true);
// parse the styles
parseStyles(clone);
// get the data
var svgData = document.getElementById('mySVG').innerHTML;
// here I'll just make a simple a with download attribute
var a = document.createElement('a');
a.href = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData.replace(/></g, '>\n\r<'));
a.download = 'finalSVG.svg';
a.innerHTML = 'download the .SVG file';
document.body.appendChild(a);
};
var parseStyles = function(svg) {
var styleSheets = [];
var i;
// get the stylesheets of the document (ownerDocument in case svg is in <iframe> or <object>)
var docStyles = svg.ownerDocument.styleSheets;
// transform the live StyleSheetList to an array to avoid endless loop
for (i = 0; i < docStyles.length; i++) {
styleSheets.push(docStyles[i]);
}
if (!styleSheets.length) {
return;
}
var defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs');
if (!defs.parentNode) {
svg.insertBefore(defs, svg.firstElementChild);
}
svg.matches = svg.matches || svg.webkitMatchesSelector || svg.mozMatchesSelector || svg.msMatchesSelector || svg.oMatchesSelector;
// iterate through all document's stylesheets
for (i = 0; i < styleSheets.length; i++) {
var currentStyle = styleSheets[i]
var rules;
try {
rules = currentStyle.cssRules;
} catch (e) {
continue;
}
// create a new style element
var style = document.createElement('style');
// some stylesheets can't be accessed and will throw a security error
var l = rules && rules.length;
// iterate through each cssRules of this stylesheet
for (var j = 0; j < l; j++) {
// get the selector of this cssRules
var selector = rules[j].selectorText;
// probably an external stylesheet we can't access
if (!selector) {
continue;
}
// is it our svg node or one of its children ?
if ((svg.matches && svg.matches(selector)) || svg.querySelector(selector)) {
var cssText = rules[j].cssText;
// append it to our <style> node
style.innerHTML += cssText + '\n';
}
}
// if we got some rules
if (style.innerHTML) {
// append the style node to the clone's defs
defs.appendChild(style);
}
}
};
</script>
</body>
</html>【问题讨论】：
-
导出的 SVG 不是有效的 SVG 文件。一个有效的 SVG 文件必须有一个我试图嵌套“不工作”到底是什么意思？我强烈建议您从获取两个导出的 SVG 开始，然后手动将它们添加到具有父
<svg>元素的 SVG 文件中。在尝试使用代码之前先尝试使其正常工作。如果您还不清楚，<div>不是有效的 SVG 元素。如果您希望 SVG 加载到矢量编辑器中，则不能将它们放在 SVG 文件中。将
标签： javascript html css svg