SVG 下载结果在带有"invalid SVG Code"的文件中

Question

我正在建立一个网站，人们可以自定义SVG颜色，然后下载它，这样他们就有了与他们的品牌颜色相匹配的插图(不使用美术程序)。现在我正在尝试实现下载功能，以便当用户单击图标时，它将SVG下载到他们的计算机。

我有以下代码从浏览其他主题:

$('.item-download-icon').on('click', function() {
let imageToDownload = $(this).parent().siblings('.item-code').find('svg');
var svg_data = imageToDownload[0].innerHTML;
console.log(svg_data);
var head = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">'
var full_svg = head + svg_data + "</svg>"
var blob = new Blob([full_svg], {type: "image/svg+xml"});  
saveAs(blob, "test.svg");
//console.log(imageToDownload);
});

它使用filesver .js库。然而，当我下载文件时，我得到了"SVG无效"。打开illustrator时出现错误。当我把它拖到Chrome中时，它显示:

error on line 11 at column 430: Namespace prefix inkscape for current-layer on namedview is not defined

你知道我做错了什么吗?谢谢!完整的SVG文本在这里:https://docs.google.com/document/d/19gOZ7NGjSDP4VrEPgpRuc4Di_4IffuKglkXB4YYGbcU/edit?usp=sharing

谢谢!

Answer 1

您的SVG包含Inkscape特有的属性，但是您还没有定义inkscape命名空间(http://www.inkscape.org/namespaces/inkscape)。

在根元素中包含它可能会解决这个问题，尽管您可能有其他丢失的名称空间，如sodipodi(http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd):

var head = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">'

您还可以选择清理源SVG以删除属于这些名称空间的所有元素和属性，但这将限制您在Inkscape或其他软件中进一步编辑SVG的能力。