由于使用角度 5 和 javascript 的转换属性，无法从 svg 生成 png

Question

由于转换属性，我无法从在应用程序中创建的 svg 生成 png。如果转换没有价值，我会得到 svg。我在 IE11 中遇到的这个问题。

    let targetElem = <any>document.getElementById('body');
    let nodesToRecover = [];
    let nodesToRemove = [];

    let svgElem = targetElem.querySelector('svg#svg-annotations')

    let parentNode = svgElem.parentNode;
        // let svg = parentNode.innerHTML.trim();
        let svg = '<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" transform="translate(295 157)" fill="yellow" /> </svg>';
        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('id', '_canvas' + this.counter);

        canvg(this.canvas, svg);

        parentNode.appendChild(this.canvas);
        let data = this.canvas.toDataURL('image/png', 0.5);
        console.log(data);
        let blobData = this.base64toBlob(data.split(',')[1], 'image/png');
        saveAs(blobData, 'myblob.png');
        console.log(blobData);
        this.counter++;

谁能帮我解决这个转换问题？任何帮助将不胜感激。

Answer 1

此问题已通过将宽度和高度设置为所需值得到解决。问题是，翻译属性值是 297、195，这超过了给定的宽度和高度。

由于使用角度 5 和 javascript 的转换属性，无法从 svg 生成 png

Not able to generate png from from svg because of transform attribute by using angular5 and javascript

javascript

internet-explorer-11

angular5