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