canvas - SVG to Canvas with Canvg - 填充线和背景线被删除？

Question

我正在尝试使用Canvg将 SVG 转换为 Canvas 。开箱即用非常好。

原始 SVG 图

画布渲染

我很难弄清楚：

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];
      }
    }
  }
}