首页新闻找找看学习计划

jquery操作svg

0
悬赏园豆:10 [已解决问题] 解决于 2014-02-26 08:53

$(function () {
            var svg = window.external.GetOne();
            console.log(svg);
             var paper = Raphael(document.getElementById('container'), 800, 600);
            paper.importSVG(svg);
            //bindDefaultEvent(paper);
        });

这样两次输出的svg不一样

下面贴出importSVG函数

Raphael.fn.importSVG = function (rawSVG, set) {
  try {
    if (typeof rawSVG === 'undefined')
      throw 'No data was provided.';
   
    rawSVG = rawSVG.replace(/\n|\r|\t/gi, '');
   
    if (!rawSVG.match(/<svg(.*?)>(.*)<\/svg>/i))
      throw "The data you entered doesn't contain valid SVG.";
   
    var findAttr  = new RegExp('([a-z\-]+)="(.*?)"','gi'),
        findStyle = new RegExp('([a-z\-]+) ?: ?([^ ;]+)[ ;]?','gi'),
        findNodes = new RegExp('<(rect|polyline|circle|ellipse|path|polygon|image|text).*?\/>','gi');

   
    while(match = findNodes.exec(rawSVG)){     
      var shape, style,
          attr = { 'fill':'#000' },
          node = RegExp.$1;
     
      while(findAttr.exec(match)){
        switch(RegExp.$1) {
          case 'stroke-dasharray':
            attr[RegExp.$1] = '- ';
          break;
          case 'style':
            style = RegExp.$2;
          break;
          default:
            attr[RegExp.$1] = RegExp.$2;
          break;
        }
      };

     
      if (typeof attr['stroke-width'] === 'undefined')
        attr['stroke-width'] = (typeof attr['stroke'] === 'undefined' ? 0 : 1);
     
      if (style)
        while(findStyle.exec(style))
          attr[RegExp.$1] = RegExp.$2;
     
      switch(node) {
        case 'rect':
          shape = this.rect();
        break;
        case 'circle':
          shape = this.circle();
        break;
        case 'ellipse':
          shape = this.ellipse();
        break;
        case 'path':
          shape = this.path(attr['d']);
        break;
        case 'polygon':
          shape = this.polygon(attr['points']);
        break;
        case 'image':
          shape = this.image();
        break;
        case 'text':
    shape = this.text();
        break;
      }
 
  


      shape.attr(attr);
   if((typeof attr['id']) !== 'undefined'){
  shape.id = attr['id'];
   }

     
      if (typeof set !== 'undefined')
        set.push(shape);
    };
  } catch (error) {
    alert('The SVG data you entered was invalid! (' + error + ')');
  }
};

// extending raphael with a polygon function
Raphael.fn.polygon = function(pointString) {
  var poly  = ['M'],
      point = pointString.split(' ');
     
  for(var i=0; i < point.length; i++) {
     var c = point[i].split(',');
     for(var j=0; j < c.length; j++) {
        var d = parseFloat(c[j]);
        if (d)
          poly.push(d);
     };
     if (i == 0)
      poly.push('L');
  }
  poly.push('Z');
 
  return this.path(poly);
};

技术先锋的主页 技术先锋 | 菜鸟二级 | 园豆:212
提问于:2013-11-19 11:32
< >
分享
最佳答案
0

Raphael 不建议这样来用,直接操作Raphael就可以了  改svg还容易引发兼容问题。

收获园豆:10
````` | 专家六级 |园豆:14268 | 2013-11-19 12:27

因为我现在数据库是保存着svg,从底层发上来的数据对某一设备要进行告警,如果不转成Raphael对象的话,根本就不无法操作。除非jquery直接可以操作svg。

技术先锋 | 园豆:212 (菜鸟二级) | 2013-11-19 12:40

@技术先锋: 直接var data = Raphael().toJson()得到pathline 修改下数组 然后Raphael(data ).translate()就新的渲染了。保存的时候当然最好也保存成数组格式,渲染的也方便点。

````` | 园豆:14268 (专家六级) | 2013-11-19 12:58

@技术先锋: 当然也可以直接申明一个数组 每次操作的时候都是操作数组  保存的时候也是数组 这样会方便很多。操作svg兼容性不好,并且修改的也会麻烦。

````` | 园豆:14268 (专家六级) | 2013-11-19 13:01
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册