我正在建立一個網站，人們可以在其中自定義 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);
});
它使用 FileSaver.js 庫。但是，當我下載檔案時，嘗試使用 Illustrator 打開時出現“SVG 無效”錯誤。當我將它拖入 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
謝謝！
uj5u.com熱心網友回復：
您的 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 的能力。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/332685.html
標籤：javascript 查询 svg 文件保护程序