無法觸發對具有URI的鏈接的點擊SVG

Question

我試圖通過單擊按鈕下載生成的SVG內容。 點擊似乎沒有觸發，也沒有效果或控制檯錯誤。 我試圖觸發簡單的JavaScript或jQuery，KO。 我嘗試使用Firefox 51.0.1和Internet Explorer 9和11，KO。 使用IE11時，出現以下錯誤：「傳遞給系統調用的數據區太小」。

我也嘗試將URI複製到瀏覽器地址欄中。在IE9中，URI被截斷並且不顯示任何內容。在Firefox中，SVG顯示正確。

編輯： 已更新代碼以將生成的鏈接添加到dom。鏈接已添加，但點擊仍然未觸發。

這裏是我試過的代碼：

$('#downloadjs').click(function() { 
 

 
    var uri = 'data:image/svg+xml;utf8,%3C%3Fxml version%3D"1.0" encoding%3D"UTF-8"%3F%3E%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"100%25" height%3D"100%25" viewBox%3D"0 0 915 585" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%3E%3Cdefs%3E%3ClinearGradient id%3D"b" y2%3D"445" gradientUnits%3D"userSpaceOnUse" y1%3D"179" gradientTransform%3D"translate(0 -2.06)" x2%3D"-29.7" x1%3D"322"%3E%3Cstop stop-color%3D"%23333" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%23fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id%3D"a" y2%3D"414" gradientUnits%3D"userSpaceOnUse" y1%3D"159" x2%3D"490" x1%3D"815"%3E%3Cstop stop-color%3D"%2333f" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%233f3fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill%3D"url(%23b)" d%3D"m403 247c-12 115-135 122-368 123-4.3-1.07-7.32-7.33-6-41 76-37 151-124 167-236 93 123 201 40.9 207 154z"%2F%3E%3Cg stroke-width%3D"3.45" fill%3D"none"%3E%3Cpath stroke%3D"%23000" d%3D"m11.8 11.8h411v411l-411 0.01v-411z"%2F%3E%3Cpath stroke%3D"%23448" d%3D"m489 11.7h415v411h-415v-411z"%2F%3E%3C%2Fg%3E%3Cpath d%3D"m876 244c-12 115-133 120-366 121-6-14-10-40-3-43 76-37.3 136-106 152-218 38 48 209 101 217 140z" fill%3D"url(%23a)"%2F%3E%3Cg id%3D"RasterLarge" transform%3D"matrix(1.36 0 0 1.28 -161 -636)"%3E%3Cpath fill%3D"%23999" d%3D"m287 730h-30v-60h20v20h10v10h10v10h20v10h40v-10h20v-20h10v-20h-10v-10h-10v-10h-40v-10h-30v-10h-20v-10h-10v-10h-10v-60h10v-10h10v-10h10v-10h90v10h30v60h-20v-10h-10v-20h-10v-10h-20v-10h-30v10h-20v10h-10v20h10v20h30v10h30v10h30v10h10v10h10v10h10v60h-10v10h-10v10h-10v10h-100v-10z"%2F%3E%3Cpath fill%3D"%23555" d%3D"m297 730h-30v-10h-10v-50h20v20h10v20h10 10v10h60v-10h10v-10h10v-40h-20v-10h-20v-10h-40v-10h-20v-10h-20v-20h-10v-50h10v-10h10v-10h20v-10h70v10h30v10h10v50h-20v-20h-10v-20h-20v-10h-50v10h-10v10h-10v30h10v10h20v10h30v10h30v10h20v10h10v10h10v50h-10v20h-10v10h-20v10h-80z"%2F%3E%3Cpath d%3D"m307 730h-30v-10h-20v-50h20v30h10v10h10v10h70v-10h20v-50h-10v-10h-20v-10h-40v-10h-30v-10h-10v-10h-10v-20h-10v-30h10v-20h20v-10h20v-10h50v10h30v10h20v50h-20v-30h-10v-10h-10v-10h-70v10h-10v40h10v10h10v10h30v10h40v10h20v10h10v20h10v40h-10v20h-20v10h-30v10h-50v-10z"%2F%3E%3C%2Fg%3E%3Cg font-size%3D"40" font-family%3D"sans-serif" text-anchor%3D"middle"%3E%3Cg font-size%3D"100"%3E%3Ctext y%3D"518" x%3D"210"%3ERaster%3C%2Ftext%3E%3Ctext y%3D"518" x%3D"695" fill%3D"%23338"%3EVector%3C%2Ftext%3E%3C%2Fg%3E%3Ctext y%3D"563" x%3D"210"%3E.jpeg .gif .png%3C%2Ftext%3E%3Ctext y%3D"563" x%3D"696" fill%3D"%23338"%3E.svg%3C%2Ftext%3E%3C%2Fg%3E%3Cpath id%3D"VectorLarge" fill%3D"%23005" d%3D"m661 294v-62.5l23.4 0.184c0.678 20.8 7.32 36.3 19.9 46.4 12.7 9.93 32.1 14.9 57.9 14.9 24.1 0 42.5-4.29 55.1-12.9 12.7-8.71 19.1-21.3 19.1-37.9 0-13.2-3.86-23.4-11.6-30.5-7.59-7.11-23.7-14-48.4-20.8l-40.1-10.9c-29-7.97-49.5-17.9-61.4-29.8-11.8-11.9-17.7-28.2-17.7-48.9 0-23.3 9.15-41.4 27.4-54.3 18.3-12.9 44-19.3 77.1-19.3 14.1 0 29.6 1.41 46.4 4.23 16.8 2.7 34.7 6.68 53.7 12v58.5h-23c-2.3-19.4-9.49-33.4-21.6-41.9-11.9-8.71-30.2-13.1-54.7-13.1-21.4 0-37.7 3.99-49 12-11.1 7.85-16.7 19.3-16.7 34.4 0 13.1 4.2 23.4 12.6 30.9 8.4 7.48 26.2 14.9 53.5 22.3l37.6 10.1c27.5 7.48 47.1 17 58.8 28.7 11.8 11.5 17.7 27 17.7 46.5 0 26.6-9.42 46.7-28.3 60.2s-46.9 20.2-84.2 20.2c-16.7 0-33.7-1.53-51-4.6-18-3-35-7-53-13z"%2F%3E%3Cuse xlink%3Ahref%3D"%23VectorLarge" transform%3D"matrix(.17 0 0 .17 392 313)"%2F%3E%3Cuse xlink%3Ahref%3D"%23RasterLarge" transform%3D"matrix(.173 0 0 .173 -8.25 314)" height%3D"100%25" width%3D"100%25" y%3D"0" x%3D"0"%2F%3E%3C%2Fsvg%3E'; 
 

 
    var link = document.createElement("a"); 
 
    link.download = 'filename.svg'; 
 
    link.type = 'image/svg+xml'; 
 
    link.href = uri; 
 

 
    document.body.appendChild(link); // add to DOM 
 
    link.click(); // no effect 
 
}); 
 

 

 
$('#downloadjq').click(function() { 
 

 
    var uri = 'data:image/svg+xml;utf8,%3C%3Fxml version%3D"1.0" encoding%3D"UTF-8"%3F%3E%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"100%25" height%3D"100%25" viewBox%3D"0 0 915 585" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%3E%3Cdefs%3E%3ClinearGradient id%3D"b" y2%3D"445" gradientUnits%3D"userSpaceOnUse" y1%3D"179" gradientTransform%3D"translate(0 -2.06)" x2%3D"-29.7" x1%3D"322"%3E%3Cstop stop-color%3D"%23333" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%23fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id%3D"a" y2%3D"414" gradientUnits%3D"userSpaceOnUse" y1%3D"159" x2%3D"490" x1%3D"815"%3E%3Cstop stop-color%3D"%2333f" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%233f3fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill%3D"url(%23b)" d%3D"m403 247c-12 115-135 122-368 123-4.3-1.07-7.32-7.33-6-41 76-37 151-124 167-236 93 123 201 40.9 207 154z"%2F%3E%3Cg stroke-width%3D"3.45" fill%3D"none"%3E%3Cpath stroke%3D"%23000" d%3D"m11.8 11.8h411v411l-411 0.01v-411z"%2F%3E%3Cpath stroke%3D"%23448" d%3D"m489 11.7h415v411h-415v-411z"%2F%3E%3C%2Fg%3E%3Cpath d%3D"m876 244c-12 115-133 120-366 121-6-14-10-40-3-43 76-37.3 136-106 152-218 38 48 209 101 217 140z" fill%3D"url(%23a)"%2F%3E%3Cg id%3D"RasterLarge" transform%3D"matrix(1.36 0 0 1.28 -161 -636)"%3E%3Cpath fill%3D"%23999" d%3D"m287 730h-30v-60h20v20h10v10h10v10h20v10h40v-10h20v-20h10v-20h-10v-10h-10v-10h-40v-10h-30v-10h-20v-10h-10v-10h-10v-60h10v-10h10v-10h10v-10h90v10h30v60h-20v-10h-10v-20h-10v-10h-20v-10h-30v10h-20v10h-10v20h10v20h30v10h30v10h30v10h10v10h10v10h10v60h-10v10h-10v10h-10v10h-100v-10z"%2F%3E%3Cpath fill%3D"%23555" d%3D"m297 730h-30v-10h-10v-50h20v20h10v20h10 10v10h60v-10h10v-10h10v-40h-20v-10h-20v-10h-40v-10h-20v-10h-20v-20h-10v-50h10v-10h10v-10h20v-10h70v10h30v10h10v50h-20v-20h-10v-20h-20v-10h-50v10h-10v10h-10v30h10v10h20v10h30v10h30v10h20v10h10v10h10v50h-10v20h-10v10h-20v10h-80z"%2F%3E%3Cpath d%3D"m307 730h-30v-10h-20v-50h20v30h10v10h10v10h70v-10h20v-50h-10v-10h-20v-10h-40v-10h-30v-10h-10v-10h-10v-20h-10v-30h10v-20h20v-10h20v-10h50v10h30v10h20v50h-20v-30h-10v-10h-10v-10h-70v10h-10v40h10v10h10v10h30v10h40v10h20v10h10v20h10v40h-10v20h-20v10h-30v10h-50v-10z"%2F%3E%3C%2Fg%3E%3Cg font-size%3D"40" font-family%3D"sans-serif" text-anchor%3D"middle"%3E%3Cg font-size%3D"100"%3E%3Ctext y%3D"518" x%3D"210"%3ERaster%3C%2Ftext%3E%3Ctext y%3D"518" x%3D"695" fill%3D"%23338"%3EVector%3C%2Ftext%3E%3C%2Fg%3E%3Ctext y%3D"563" x%3D"210"%3E.jpeg .gif .png%3C%2Ftext%3E%3Ctext y%3D"563" x%3D"696" fill%3D"%23338"%3E.svg%3C%2Ftext%3E%3C%2Fg%3E%3Cpath id%3D"VectorLarge" fill%3D"%23005" d%3D"m661 294v-62.5l23.4 0.184c0.678 20.8 7.32 36.3 19.9 46.4 12.7 9.93 32.1 14.9 57.9 14.9 24.1 0 42.5-4.29 55.1-12.9 12.7-8.71 19.1-21.3 19.1-37.9 0-13.2-3.86-23.4-11.6-30.5-7.59-7.11-23.7-14-48.4-20.8l-40.1-10.9c-29-7.97-49.5-17.9-61.4-29.8-11.8-11.9-17.7-28.2-17.7-48.9 0-23.3 9.15-41.4 27.4-54.3 18.3-12.9 44-19.3 77.1-19.3 14.1 0 29.6 1.41 46.4 4.23 16.8 2.7 34.7 6.68 53.7 12v58.5h-23c-2.3-19.4-9.49-33.4-21.6-41.9-11.9-8.71-30.2-13.1-54.7-13.1-21.4 0-37.7 3.99-49 12-11.1 7.85-16.7 19.3-16.7 34.4 0 13.1 4.2 23.4 12.6 30.9 8.4 7.48 26.2 14.9 53.5 22.3l37.6 10.1c27.5 7.48 47.1 17 58.8 28.7 11.8 11.5 17.7 27 17.7 46.5 0 26.6-9.42 46.7-28.3 60.2s-46.9 20.2-84.2 20.2c-16.7 0-33.7-1.53-51-4.6-18-3-35-7-53-13z"%2F%3E%3Cuse xlink%3Ahref%3D"%23VectorLarge" transform%3D"matrix(.17 0 0 .17 392 313)"%2F%3E%3Cuse xlink%3Ahref%3D"%23RasterLarge" transform%3D"matrix(.173 0 0 .173 -8.25 314)" height%3D"100%25" width%3D"100%25" y%3D"0" x%3D"0"%2F%3E%3C%2Fsvg%3E'; 
 

 
    var $link = $('<a></a>'); 
 
    $link.attr('download', 'filename.svg'); 
 
    $link.attr('type', 'image/svg+xml'); 
 
    $link.attr('href', uri); 
 

 
    $('body').append($link); // add to DOM 
 
    $link.click(); // no effect 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="downloadjs">Download with javascript</button> 
 
<button id="downloadjq">Download with jQuery</button>

有什麼問題與以前的代碼？ 或者瀏覽器有限制嗎？

這裏是具有相同URI的鏈接似乎運作良好：

$(function() { 
 
    $('#link').attr('href', 'data:image/svg+xml;utf8,%3C%3Fxml version%3D"1.0" encoding%3D"UTF-8"%3F%3E%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"100%25" height%3D"100%25" viewBox%3D"0 0 915 585" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink"%3E%3Cdefs%3E%3ClinearGradient id%3D"b" y2%3D"445" gradientUnits%3D"userSpaceOnUse" y1%3D"179" gradientTransform%3D"translate(0 -2.06)" x2%3D"-29.7" x1%3D"322"%3E%3Cstop stop-color%3D"%23333" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%23fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient id%3D"a" y2%3D"414" gradientUnits%3D"userSpaceOnUse" y1%3D"159" x2%3D"490" x1%3D"815"%3E%3Cstop stop-color%3D"%2333f" offset%3D"0"%2F%3E%3Cstop stop-color%3D"%233f3fff" stop-opacity%3D"0" offset%3D"1"%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath fill%3D"url(%23b)" d%3D"m403 247c-12 115-135 122-368 123-4.3-1.07-7.32-7.33-6-41 76-37 151-124 167-236 93 123 201 40.9 207 154z"%2F%3E%3Cg stroke-width%3D"3.45" fill%3D"none"%3E%3Cpath stroke%3D"%23000" d%3D"m11.8 11.8h411v411l-411 0.01v-411z"%2F%3E%3Cpath stroke%3D"%23448" d%3D"m489 11.7h415v411h-415v-411z"%2F%3E%3C%2Fg%3E%3Cpath d%3D"m876 244c-12 115-133 120-366 121-6-14-10-40-3-43 76-37.3 136-106 152-218 38 48 209 101 217 140z" fill%3D"url(%23a)"%2F%3E%3Cg id%3D"RasterLarge" transform%3D"matrix(1.36 0 0 1.28 -161 -636)"%3E%3Cpath fill%3D"%23999" d%3D"m287 730h-30v-60h20v20h10v10h10v10h20v10h40v-10h20v-20h10v-20h-10v-10h-10v-10h-40v-10h-30v-10h-20v-10h-10v-10h-10v-60h10v-10h10v-10h10v-10h90v10h30v60h-20v-10h-10v-20h-10v-10h-20v-10h-30v10h-20v10h-10v20h10v20h30v10h30v10h30v10h10v10h10v10h10v60h-10v10h-10v10h-10v10h-100v-10z"%2F%3E%3Cpath fill%3D"%23555" d%3D"m297 730h-30v-10h-10v-50h20v20h10v20h10 10v10h60v-10h10v-10h10v-40h-20v-10h-20v-10h-40v-10h-20v-10h-20v-20h-10v-50h10v-10h10v-10h20v-10h70v10h30v10h10v50h-20v-20h-10v-20h-20v-10h-50v10h-10v10h-10v30h10v10h20v10h30v10h30v10h20v10h10v10h10v50h-10v20h-10v10h-20v10h-80z"%2F%3E%3Cpath d%3D"m307 730h-30v-10h-20v-50h20v30h10v10h10v10h70v-10h20v-50h-10v-10h-20v-10h-40v-10h-30v-10h-10v-10h-10v-20h-10v-30h10v-20h20v-10h20v-10h50v10h30v10h20v50h-20v-30h-10v-10h-10v-10h-70v10h-10v40h10v10h10v10h30v10h40v10h20v10h10v20h10v40h-10v20h-20v10h-30v10h-50v-10z"%2F%3E%3C%2Fg%3E%3Cg font-size%3D"40" font-family%3D"sans-serif" text-anchor%3D"middle"%3E%3Cg font-size%3D"100"%3E%3Ctext y%3D"518" x%3D"210"%3ERaster%3C%2Ftext%3E%3Ctext y%3D"518" x%3D"695" fill%3D"%23338"%3EVector%3C%2Ftext%3E%3C%2Fg%3E%3Ctext y%3D"563" x%3D"210"%3E.jpeg .gif .png%3C%2Ftext%3E%3Ctext y%3D"563" x%3D"696" fill%3D"%23338"%3E.svg%3C%2Ftext%3E%3C%2Fg%3E%3Cpath id%3D"VectorLarge" fill%3D"%23005" d%3D"m661 294v-62.5l23.4 0.184c0.678 20.8 7.32 36.3 19.9 46.4 12.7 9.93 32.1 14.9 57.9 14.9 24.1 0 42.5-4.29 55.1-12.9 12.7-8.71 19.1-21.3 19.1-37.9 0-13.2-3.86-23.4-11.6-30.5-7.59-7.11-23.7-14-48.4-20.8l-40.1-10.9c-29-7.97-49.5-17.9-61.4-29.8-11.8-11.9-17.7-28.2-17.7-48.9 0-23.3 9.15-41.4 27.4-54.3 18.3-12.9 44-19.3 77.1-19.3 14.1 0 29.6 1.41 46.4 4.23 16.8 2.7 34.7 6.68 53.7 12v58.5h-23c-2.3-19.4-9.49-33.4-21.6-41.9-11.9-8.71-30.2-13.1-54.7-13.1-21.4 0-37.7 3.99-49 12-11.1 7.85-16.7 19.3-16.7 34.4 0 13.1 4.2 23.4 12.6 30.9 8.4 7.48 26.2 14.9 53.5 22.3l37.6 10.1c27.5 7.48 47.1 17 58.8 28.7 11.8 11.5 17.7 27 17.7 46.5 0 26.6-9.42 46.7-28.3 60.2s-46.9 20.2-84.2 20.2c-16.7 0-33.7-1.53-51-4.6-18-3-35-7-53-13z"%2F%3E%3Cuse xlink%3Ahref%3D"%23VectorLarge" transform%3D"matrix(.17 0 0 .17 392 313)"%2F%3E%3Cuse xlink%3Ahref%3D"%23RasterLarge" transform%3D"matrix(.173 0 0 .173 -8.25 314)" height%3D"100%25" width%3D"100%25" y%3D"0" x%3D"0"%2F%3E%3C%2Fsvg%3E'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="link">Download</a>

Answer 1

要觸發點擊事件，鏈接已被添加到該文件：

document.body.appendChild(link); // js 
$(body).append($link); //jq 

請注意，Inernet Explorer似乎無法處理這些URI，有時它們會被截斷，有時會被忽略。

可以使用Firefox或Chrome。