将图案和图像元素转换为PNG图像的SVG失败 [英] SVG with pattern and image element conversion to PNG Image failed

问题描述

我试图将用Raphael.js生成的svg转换成PNG图像。好吧，当svg没有模式和图像组件时，我将svg转换为图像。然后当我将这两个组件添加到SVG时出现问题并且转换失败。完整小提琴 此处。即使我保存生成的svg并在浏览器中打开而不转换为图像，图像和图案也不会呈现。

I am trying to covert svg generated with Raphael.js into PNG image. Well, I converted the svg into image when svg has no pattern and image component. Then again when I add these two component into SVG something goes wrong and conversion fails.Complete fiddle is here. Even if I save the generated svg and open in browser without conversion to image the image and patter is not rendered.

代码段为：

var r = Raphael(document.getElementById("cus"), 390, 253);
    r.setViewBox(-5, -2, 228, 306);
    for (var outline in doorMatOutline) {
        var path = r.path(doorMatOutline[outline].path);
        //path.attr({fill: 'url('+patternuri+')'}); //adding pattern        
    }
    //adding image
    var img = r.image(imageuri, 5 ,10 ,100 ,100);

    var svg = $('#cus').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");

    canvg('cvs', svg, {
        ignoreMouse: true,
        ignoreAnimation: true
    });

    var canvas = document.getElementById('cvs');
    var img = canvas.toDataURL("image/png");

    $("#resImg").attr('src', img);
    $("#cus").hide();

推荐答案

我在这里解决了这个问题 http://jsfiddle.net/fktGL/1/ ，首先我必须从

I have solved this here http://jsfiddle.net/fktGL/1/, first I had to change the svg attribute from

xmlns =http://www.w3.org/2000/svg

到

xmlns:xlink="http://www.w3.org/1999/xlink"

因为svg未在W3C验证服务上验证且在哪里是一个stackoverflow解释需要进行更改。

as the svg wasn't validating on the W3C validation service and here is a stackoverflow explaining that a change is required.

然后我必须添加一些超时以允许SVG正确呈现。我明白这是因为图像已经在SVG&画布，但都需要一些时间来渲染图像。我的解决方案我不能在较慢的设备上完美工作（增加超时会有所帮助），但我不知道另一种解决方法（欢迎任何评论/改进）。

I then had to add some timeouts to allow the SVG to render properly. I understand this is because the image has been drawn in the SVG & canvas but both need some time to render the image. My solution my not work perfectly on slower devices( an increase in the timeouts would help), but I don't know another way to get around this (welcome any comments/improvements).

这是最后的片段

var r = Raphael(document.getElementById("cus"), 390, 253);
r.setViewBox(-5, -2, 228, 306);
for (var outline in doorMatOutline) {
    var path = r.path(doorMatOutline[outline].path);
    path.attr({
        fill: 'url(' + patternuri + ')'
    });
}

$('#cus svg').removeAttr('xmlns');

// If not IE
if(/*@cc_on!@*/false){
    $('#cus svg').attr('xmlns:xlink',"http://www.w3.org/1999/xlink");
}


// First timeout needed to render svg (I think)
setTimeout(function(){ 
    var svg = $('#cus').html();
    window.svg = svg;
    canvg(document.getElementById('cvs'), svg);
    // annother delay required after canvg
    setTimeout(function(){
        var canvas = document.getElementById('cvs'),
            img = canvas.toDataURL("image/png");
        $("#resImg").attr('src', img);
        //$("#cus").hide();
        console.log("ending... ");
    },100)
},100);

这篇关于将图案和图像元素转换为PNG图像的SVG失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！