0

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

因此，我希望了解如何从 Inkscape 中提取 SVG 路径并使用http://upload.wikimedia.org/wikipedia/commons/为 Google更新http://jsfiddle.net/aqoon/LN23r/5/上的示例2/28/Google_free_icon.svg文件

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时有很多图层和路径？

4

1 回答 1

1

Raphael 不支持（Raphael 中的 SVG 文件，可以使用它们吗？ ...）加载整个 SVG 图像并将其用作路径，因此这里唯一合理的选择是提取单独的路径并将它们存储在某种数据结构中，例如在老虎的例子（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 文件中具有与之关联的变换矩阵（例如 transform="matrix(204.67566,0,0,204.67566,-9225.9642,-30242.949)"），这会影响元素的相应位置和比例。

总体而言，从 SVG 移植路径的过程并非微不足道，而是易于管理。还有一个插件可以帮助您，请参阅https://github.com/wout/raphael-svg-import

于 2012-10-09T15:28:29.403 回答