Open ARRUSAG opened 2 days ago
I'm releasing v3.5.0 today, can you retest?
If still does not work, I will need a JSFiddle or some actual HTML+CSS+SVG files.
Tried with the latest one also, it didn't worked as expected. Basically svg image if used as mask in i tag, not downloading properly. < i style="-webkit-mask: url('img/svgimage.svg') no-repeat 50% 50%; -webkit-mask-size: contain; mask:url('img/svgimage.svg') no-repeat 50% 50%; mask-size:contain;background-color:#9CCFAD; height:60%; width:60%; />"
My code looks like. HTML:
<div class="mainContent">
<button id="download"> Download </button>
<div style="height:230px; border:1px solid red; width:150px;">
<div style="display:flex; border 1px solid black; flex-flow:column">
<div style="display:flex">
<div>
<span class="content-page-item-caption-link" id="objView-rc_3-rc_3_1-capt" lnk="">HEADER</span>
</div>
<div>
<div class="flex-icon-container">
<i style="-webkit-mask: url('img/svgimage.svg') no-repeat 50% 50%; -webkit-mask-size: contain; mask:url('img/svgimage.svg') no-repeat 50% 50%; mask-size:contain;background-color:#9CCFAD; height:60%; width:60%;"> </i>
</div>
</div>
</div>
<div style="width:100%;height:100%">
</div>
</div>
</div>
JS
$(document).ready(function() {
let stylesArray = "";
let fileName = "fileDownload";
var container = document.querySelector('.mainContent');;
function PerformPostConversionAction(link, stylesArray) {
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
function dataURLtoBlob(dataUrl) {
var arr = dataUrl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
};
function createDownloadLink(blob, filename, check) {
const link = document.createElement('a');
link.href = check ? URL.createObjectURL(blob) : blob;
link.download = filename;
return link;
}
$('#download').click(function() {
domtoimage.toPng(container, {
width: container.offsetWidth,
height: container.offsetHeight,
quality: 1,
style: {
background: "#F7F9FB"
},
})
.then(dataUrl => {
var blob = dataURLtoBlob(dataUrl);
const link = createDownloadLink(blob, fileName, true);
PerformPostConversionAction(link, stylesArray);
}).catch(error =>
console.error('Oops, something went wrong!', error)
);
})
});
Attached the image.
Please let me know, if you require more info on this.
Use case: description, code
SVG image is not downloading properly. Having a svg image, rendered using i tag My UI is like below.*- If downloaded as png
If downloaded as svg
Any help on this ?
jsfiddle
Expected behavior
Actual behavior (stack traces, console logs etc)
Library version
Browsers