SVG to Canvas with canvg不尊重css

Question

I'm attempting to convert my SVG to canvas to get a png. everything is working great except for the css positioning.

please see this jsfiddle

you can see the top section which is the SVG.

I am using canvg to render the svg on the canvas element.

the 2 svgs overlap each other, one is 100% size, the other 80%. I am rendering these with Raphael.

I have tried to insert inline styles as suggested in various place like:

<style type='text/css'>![CDATA[svg{ margin: 0 auto; }]]></style>

however canvg only returns:

Cannot read property 'split' of undefined

I need the canvas to be identical to the SVG.

*note changing both to 100% size and changin radius of circles is not an option, this is a very simplified version as illustration.

Answer 1

While it's less than ideal, one option is to inline all of the styles before you render. Here's what I used to deal with the same issue on this project :

function inlineAllStyles() {
    var svg_style, selector, cssText;

    for (var i = 0; i <= document.styleSheets.length - 1; i++) {
        //loop through your stylesheets
        if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf('style.css') != -1) {
            //pull out the styles from the one you want to use
            if (document.styleSheets[i].rules != undefined) {
                svg_style = document.styleSheets[i].rules
            } else {
                svg_style = document.styleSheets[i].cssRules
            }
        }
    }

    if (svg_style != null && svg_style != undefined) {
        for (var i = 0; i < svg_style.length; i++) {
            if (svg_style[i].type == 1) {

                selector = svg_style[i].selectorText;

                styles = makeStyleObject(svg_style[i]);

                // Apply the style directly to the elements that match the selctor
                // (this requires to not have to deal with selector parsing)
                d3.selectAll(selector).style(styles)
            }
        };
    }
}

 function makeStyleObject(rule) {
    var styleDec = rule.style;
    var output = {};
    var s;

    for (s = 0; s < styleDec.length; s++) {
        output[styleDec[s]] = styleDec[styleDec[s]];
        if(styleDec[styleDec[s]] === undefined) {
            //firefox being firefoxy
            output[styleDec[s]] = styleDec.getPropertyValue(styleDec[s])
        }
    }

    return output;
}

inlineAllStyles()

Answer 2

If your css rules are not too much complicated, you can do the following steps:

1. Read the .css file, which contains all the css rule. If required, you can use a different css file and put it on the server, which you can only use for this purpose.

    function readTextFile(file) { var rawFile = new XMLHttpRequest(); var allText = ''; rawFile.open("GET", file, false); rawFile.onreadystatechange = function () { if(rawFile.readyState === 4) { if(rawFile.status === 200 || rawFile.status == 0) { allText = rawFile.responseText; } } }; rawFile.send(null); return allText; } var svg_style = readTextFile(base_url + '/css/svg_sm_dashboard.css'); 

2. Now apply the style on all the svg elements

    var all_style = svg_style.replace(/\\r?\\n|\\r/g,'').split('}'); all_style.forEach(function(el) { if (el.trim() != '') { var full_rule_string = el.split('{'); var selector = full_rule_string[0].trim(); var all_rule = full_rule_string[1].split(';'); all_rule.forEach(function (elem) { if (elem.trim() != '') { var attr_value = elem.split(':'); d3.selectAll(selector).style(attr_value[0].trim() + '', attr_value[1].trim() + ''); } }); } }); 

3. Now use canvg to convert it

    $('body').after('<canvas id="sm_canvas" style="display=none;"></canvas>'); var canvas = document.getElementById('sm_canvas'); canvg(canvas, $("<div>").append($('svg').clone()).html());