3

SVG をキャンバスに変換して png を取得しようとしています。CSSの配置を除いて、すべてがうまく機能しています。

この jsfiddleを見てください

SVG である上部セクションが表示されます。

キャンバス要素にsvgをレンダリングするためにcanvgを使用しています。

2 つの svg が互いに重なっており、1 つは 100% のサイズで、もう 1 つは 80% のサイズです。これらをラファエルでレンダリングしています。

次のようなさまざまな場所で提案されているように、インラインスタイルを挿入しようとしました:

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

ただし、canvg のみが返されます。

Cannot read property 'split' of undefined

キャンバスを SVG と同一にする必要があります。

*100% のサイズに変更し、円の半径を変更することはオプションではありません。これは図として非常に単純化されたバージョンです。

4

2 に答える 2

5

理想的とは言えませんが、1 つのオプションは、レンダリングする前にすべてのスタイルをインライン化することです。このプロジェクトで同じ問題に対処するために使用したものは次のとおりです。

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()
于 2015-02-19T16:57:16.117 に答える