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ファイルを削除して、レイヤーが1つだけで、「G」だけが表示されないようにしましたが、 http：//jsfiddle.net/aqoon/LN23r/5/に何が表示されていませんか？

また、Inkscapeでhttp://upload.wikimedia.org/wikipedia/commons/2/28/Google_free_icon.svgを開くと、多くのレイヤーとパスがあるので、var googleBtnにレイヤーを追加するにはどうすればよいですか？

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 に答える