SVG與Canvg畫布 - 線填充和背景線下降？

Question

我正在嘗試使用Canvg將SVG轉換爲Canvas。開箱即用非常好。

原始SVG圖形 SVG Graph http://f.cl.ly/items/130R0H3U291J1Q3G182I/Screen%20Shot%202013-03-18%20at%2012.53.57%20PM.png

畫布渲染 Canvas Render http://f.cl.ly/items/132M2V3I2Y1Z261L0J23/Screen%20Shot%202013-03-18%20at%2012.53.47%20PM.png

我有一個很難搞清楚：

1. 爲什麼行 「得到填補」？看起來從第一點到最後一點正在繪製一條線，但我似乎無法在canvg庫中找到它。
2. 背景線元素被越來越下降：下面是一個例子<line class="tick" y2="-220" x2="0"></line>

人有什麼想法？樂意提供更多信息。謝謝！

Answer 1

你如何應用你的css風格？你的svg有多個類嗎？ 那些不會canvg正常工作，看到這個問題：

http://code.google.com/p/canvg/issues/detail?id=127

而且速戰速決我連接（未測試非常好）

// @ line 736, replace with: 
// add class styles 
if (this.attribute('class').hasValue()) { 

    // check for multiple classes 
    // (<circle class="big green">) 
    // with css .big.green {fill:green;r:big;} 

    // we dont assume the elements in svg.Styles are sorted, so we check 
    // .big.green and .green.big 
    // TODO: if its sorted, one could reduce the work done here.. 

    // generates all possible combination, no doublicates, but taking ordering into account 
    // comb2(['aa','bb', 'cc']) 
    // [".aa", ".aa.bb", ".aa.bb.cc", ".aa.cc", ".aa.cc.bb", ".bb", ".bb.aa", ".bb.aa.cc", ".bb.cc", ".bb.cc.aa", ".cc", ".cc.aa", ".cc.aa.bb", ".cc.bb", ".cc.bb.aa"] 
    var comb2 = function combinations(arr) { 
    var fn = function(active, rest, all) { 
     if (active != ''){all.push(active);} 
     for (var i=0; i<rest.length;++i){ 
     fn(active + '.'+rest[i], [].concat(rest.slice(0,i), rest.slice(i+1)), all); 
     } 
     return all; 
    } 
    return fn('', arr, []); 
    } 

    var classes = svg.compressSpaces(this.attribute('class').value).split(' '); 

    classes = comb2(classes); 

    for (var j=0; j<classes.length; j++) { 
    styles = svg.Styles[classes[j]]; 
    if (styles != null) { 
     for (var name in styles) { 
     this.styles[name] = styles[name]; 
     } 
    } 
    styles = svg.Styles[node.nodeName+classes[j]]; 
    if (styles != null) { 
     for (var name in styles) { 
     this.styles[name] = styles[name]; 
     } 
    } 
    } 
}