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 Canvas Render http://f.cl.ly/items/132M2V3I2Y1Z261L0J23/Screen%20Shot%202013-03-18%20at%2012.53.47%20PM.png

我很难搞清楚：

为什么这条线“被填满”？似乎从第一点到最后一点绘制了一条线，但我似乎无法在canvg库中找到它。
背景线元素将被删除：以下是<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];
      }
    }
  }
}

带有Canvg的SVG to Canvas - 填充的行和背景行被删除了？

1 个答案: