SVG image is not downloading properly

[ARRUSAG]

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

• Chrome 49+
• Firefox 45+

[IDisposable]

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.

[ARRUSAG]

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.

[ARRUSAG]

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.

Any update on this and please let me know if you require any further info.

[IDisposable]

The attached image is 404

[IDisposable]

Since it's just an SVG, can you just paste it in a comment code-block here?

[ARRUSAG]

you can download from here
or

[ARRUSAG]

Any update on this?

[ARRUSAG]

Any update or workaround on this?