raphael图标提取路径

Question

我想创建一些基于RaphaelJs图标的登录按钮，但在示例页面上只有可用的Twitter路径！

因此，我看明白了如何提取从Inkscape中的SVG路径和使用http://upload.wikimedia.org/wikipedia/commons/2/28/Google_free_icon.svg文件更新http://jsfiddle.net/aqoon/LN23r/5/对谷歌的例子

var facebookBtn = "", 
    googleBtn = "M47.446122,148.46699L47.463496,149.0968L47.430196,149.09969C47.363594,148.8854247.278172,148.7259147.173az931,148.62119C47.069686,148.5164646.943725,148.464146.796048,148.4641C46.681186,148.464146.582493,148.4875146.499968,148.53432C46.417441,148.5811346.340465,148.6571446.269039,148.76235C46.124256,148.9775946.051865,149.2237246.051865,149.50074C46.051865,149.6329846.069239,149.7577346.103987,149.875C46.138734,149.9922846.189408,150.095846.256009,150.18556C46.385347,150.359346.54316,150.4461746.729448,150.44617C46.802803,150.4461746.871816,150.4307346.936487,150.39984C47.001155,150.3689547.054242,150.3264847.095748,150.27243C47.152694,150.1971547.181168,150.1078647.18117,150.00458C47.181168,149.9090347.155349,149.8400247.103711,149.79755C47.05207,149.7550846.96689,149.7338446.84817,149.73384L46.84817,149.70054L47.771883,149.70054L47.771883,149.73384C47.686942,149.7415647.62734,149.7533947.593076,149.76931C47.558809,149.7852447.533472,149.8125147.517065,149.85111C47.498724,149.8935947.489555,149.9780447.489557,150.10448C47.489555,150.1392347.491485,150.1932847.495348,150.26664L47.498244,150.29994C47.461564,150.2864347.434538,150.2796747.417165,150.27967C47.395929,150.2796747.368903,150.2907747.336087,150.31297C47.252112,150.3708847.154625,150.4152847.043626,150.44617C46.932625,150.4770646.815351,150.492546.691804,150.4925C46.521925,150.492546.368697,150.4635546.23212,150.40563C46.095541,150.3477245.984782,150.2647145.899844,150.15661C45.836139,150.0755345.787154,149.9790145.752889,149.86704C45.718624,149.7550845.701491,149.6363545.701491,149.51088C45.701491,149.338145.732378,149.1773945.794152,149.02875C45.855926,148.8801145.942795,148.7575346.054761,148.661C46.146456,148.5828246.252147,148.5224946.371835,148.48002C46.491521,148.4375646.617964,148.4163246.751165,148.41632C46.828382,148.4163246.900049,148.4235646.966168,148.43804C47.032284,148.4525247.102503,148.4761647.176826,148.50898L47.262248,148.54807C47.283481,148.5567647.302785,148.561147.320161,148.5611C47.358768,148.561147.388207,148.5297347.408479,148.46699L47.446122,148.46699z", 
    twitterBtn = "M14.605,13.11c0.913-2.851,2.029-4.698,3.313-6.038c0.959-1,1.453-1.316,0.891-0.216c0.25-0.199,0.606-0.464,0.885-0.605c1.555-0.733,1.442-0.119,0.373,0.54c2.923-1.045,2.82,0.286-0.271,0.949c2.527,0.047,5.214,1.656,5.987,5.077c0.105,0.474-0.021,0.428,0.464,0.514c1.047,0.186,2.03,0.174,2.991-0.13c-0.104,0.708-1.039,1.167-2.497,1.471c-0.541,0.112-0.651,0.083-0.005,0.229c0.799,0.179,1.69,0.226,2.634,0.182c-0.734,0.846-1.905,1.278-3.354,1.296c-0.904,3.309-2.976,5.678-5.596,7.164c-6.152,3.492-15.108,2.984-19.599-3.359c2.947,2.312,7.312,2.821,10.555-0.401c-2.125,0-2.674-1.591-0.99-2.449c-1.595-0.017-2.608-0.521-3.203-1.434c-0.226-0.347-0.229-0.374,0.14-0.64c0.405-0.293,0.958-0.423,1.528-0.467c-1.651-0.473-2.66-1.335-3.009-2.491c-0.116-0.382-0.134-0.363,0.256-0.462c0.38-0.097,0.87-0.148,1.309-0.17C6.11,10.88,5.336,9.917,5.139,8.852c-0.186-1.006,0.005-0.748,0.758-0.46C9.263,9.68,12.619,11.062,14.605,13.11L14.605,13.11z", 
    yahooBtn = ""; 

$('.twitterBtn').each(function(i) { 
    paper = Raphael($(this)[0], 40, 40) 
    paper.path(twitterBtn).attr({ 
     "fill": "#333" 
    }) 
}) 
$('.googleBtn').each(function(i) { 
    paper = Raphael($(this)[0], 40, 40) 
    paper.path(googleBtn).attr({ 
     "fill": "#333" 
    }) 
})​ 

我试图剥离SVG文件，这样我只有一个层只有'G'但http://jsfiddle.net/aqoon/LN23r/5/未被显示，我错过了什么？

另外，如何在var googleBtn中添加额外图层，因为当我在Inkscape中打开http://upload.wikimedia.org/wikipedia/commons/2/28/Google_free_icon.svg时，有许多图层和路径？

Answer 1

Raphael不支持（SVG files in Raphael, can they be used? ...）加载整个SVG图像并使用它们作为路径，因此这里唯一合理的选择是提取单独的路径并将它们存储在某种数据结构中，如使用tiger的示例http://raphaeljs.com/tiger.html） - 检查那里的源代码。

的SVG文件也可以有很奇怪的内部坐标系统，所以它支付加载一个后调整视图中，类似这样的

var path = paper.path(googleBtn).attr({ 
     "fill": "#333" 
    }); 
    var bbox = path.getBBox(); 
    paper.setViewBox(bbox.x, bbox.y, bbox.width, bbox.height);  

要组不同的元素，可以使用Raphael.Set http://jsfiddle.net/LN23r/40/

var shadow = paper.path(googleBtn).attr({"fill": "#0F0", "stroke":"none"}).translate(0.08,0.08); 
    var path = paper.path(googleBtn).attr({"fill": "#333", "stroke":"none"}); 
    var set = paper.set(shadow, path); 
    var bbox = set.getBBox(); 
    paper.setViewBox(bbox.x, bbox.y, bbox.width, bbox.height);  

当分组元素时，注意它们具有与它们在SVG文件（例如变换=“矩阵（204.67566,0,0,204.67566，-9225.9642，-30242.949）”），从而影响到相应的位置相关联的变换矩阵和规模要素。总的来说，从SVG移植路径的过程并不是完全无关紧要，而是易于管理的。还有一个插件可以帮助你，看到https://github.com/wout/raphael-svg-import