如何使用snapsvg，js保存SVG？

时间：2015-10-06 05:56:04

标签： svg adobe-illustrator 

var snap = Snap('#snap'),
    snapCode = "M42.1596297,13.586522 L48.3696297,16.220522 C49.1016297,16.532522 49.0766297,17.026522 48.3106297,17.323522 L41.8376297,19.850522 C41.0716297,20.147522 39.8576297,20.137522 39.1206297,19.826522 L32.9156297,17.191522 C32.1786297,16.884522 32.2026297,16.386522 32.9696297,16.088522 L39.4426297,13.567522 C40.2086297,13.264522 41.4286297,13.279522 42.1596297,13.586522 L42.1596297,13.586522 Z M31.0686297,17.913522 L37.2736297,20.547522 C38.0096297,20.854522 37.9856297,21.352522 37.2186297,21.650522 L30.7456297,24.171522 C29.9796297,24.474522 28.7606297,24.464522 28.0286297,24.151522 L21.8186297,21.517522 C21.0826297,21.209522 21.1106297,20.712522 21.8776297,20.414522 L28.3506297,17.893522 C29.1166297,17.591522 30.3316297,17.601522 31.0686297,17.913522 L31.0686297,17.913522 Z M20.4246297,13.406522 L26.6336297,16.035522 C27.3656297,16.347522 27.3416297,16.841522 26.5746297,17.139522 L20.1016297,19.665522 C19.3356297,19.963522 18.1206297,19.952522 17.3846297,19.641522 L11.1756297,17.011522 C10.4446297,16.699522 10.4676297,16.206522 11.2336297,15.905522 L17.7066297,13.383522 C18.4726297,13.083522 19.6876297,13.094522 20.4246297,13.406522 L20.4246297,13.406522 Z M9.7806297,8.89452195 L15.9896297,11.523522 C16.7216297,11.835522 16.6976297,12.333522 15.9316297,12.630522 L9.4586297,15.151522 C8.6926297,15.449522 7.4786297,15.439522 6.7416297,15.128522 L0.536629704,12.498522 C-0.199370296,12.186522 -0.175370296,11.693522 0.590629704,11.395522 L7.0636297,8.86952195 C7.8286297,8.57252195 9.0436297,8.58152195 9.7806297,8.89452195 L9.7806297,8.89452195 Z M31.5166297,9.07952195 L37.7266297,11.708522 C38.4626297,12.020522 38.4336297,12.513522 37.6676297,12.815522 L31.1996297,15.336522 C30.4326297,15.634522 29.2136297,15.624522 28.4816297,15.312522 L22.2726297,12.682522 C21.5356297,12.370522 21.5646297,11.878522 22.3306297,11.576522 L28.7996297,9.05452195 C29.5656297,8.75752195 30.7846297,8.76752195 31.5166297,9.07952195 L31.5166297,9.07952195 Z M20.8776297,4.56752195 L27.0826297,7.20152195 C27.8186297,7.50952195 27.7946297,8.00652195 27.0296297,8.30552195 L20.5556297,10.826522 C19.7896297,11.129522 18.5706297,11.113522 17.8386297,10.806522 L11.6296297,8.17152195 C10.8976297,7.85952195 10.9216297,7.36652195 11.6886297,7.06952195 L18.1616297,4.54252195 C18.9266297,4.24552195 20.1416297,4.25552195 20.8776297,4.56752195 L20.8776297,4.56752195 Z M53.2576297,9.26552195 L59.4626297,11.894522 C60.1986297,12.206522 60.1746297,12.699522 59.4086297,12.997522 L52.9346297,15.523522 C52.1686297,15.821522 50.9556297,15.811522 50.2176297,15.499522 L44.0086297,12.870522 C43.2766297,12.558522 43.3006297,12.060522 44.0676297,11.763522 L50.5406297,9.24152195 C51.3066297,8.94352195 52.5216297,8.95252195 53.2576297,9.26552195 L53.2576297,9.26552195 Z M42.6146297,4.75252195 L48.8246297,7.38252195 C49.5556297,7.69452195 49.5316297,8.18752195 48.7656297,8.48852195 L42.2926297,11.010522 C41.5256297,11.307522 40.3116297,11.297522 39.5746297,10.985522 L33.3646297,8.35652195 C32.6336297,8.04452195 32.6576297,7.55152195 33.4236297,7.25352195 L39.8976297,4.72752195 C40.6626297,4.43052195 41.8776297,4.44152195 42.6146297,4.75252195 L42.6146297,4.75252195 Z M31.9706297,0.240521954 L38.1796297,2.87452195 C38.9156297,3.18152195 38.8876297,3.67952195 38.1206297,3.97652195 L31.6476297,6.49852195 C30.8816297,6.80152195 29.6676297,6.79152195 28.9306297,6.47852195 L22.7256297,3.84452195 C21.9896297,3.53652195 22.0136297,3.03952195 22.7796297,2.74152195 L29.2526297,0.219521954 C30.0196297,-0.0814780463 31.2396297,-0.0714780463 31.9706297,0.240521954 L31.9706297,0.240521954 Z",
    snapCodeHover = "M42.926,15.289 L49.036,17.88 C49.757,18.188 49.732,18.673 48.978,18.966 L42.609,21.452 C41.855,21.745 40.66,21.734 39.935,21.428 L33.83,18.836 C33.105,18.533 33.129,18.044 33.883,17.751 L40.252,15.27 C41.006,14.972 42.206,14.987 42.926,15.289 L42.926,15.289 Z M31.051,20.027 L37.156,22.619 C37.881,22.921 37.857,23.411 37.103,23.704 L30.734,26.186 C29.98,26.483 28.78,26.473 28.06,26.166 L21.95,23.574 C21.225,23.271 21.254,22.782 22.008,22.489 L28.378,20.008 C29.131,19.709 30.326,19.719 31.051,20.027 L31.051,20.027 Z M20.098,15.112 L26.208,17.699 C26.928,18.007 26.903,18.491 26.15,18.784 L19.78,21.27 C19.026,21.563 17.831,21.553 17.106,21.246 L10.996,18.659 C10.276,18.351 10.3,17.867 11.053,17.569 L17.423,15.088 C18.178,14.794 19.373,14.804 20.098,15.112 L20.098,15.112 Z M9.624,10.192 L15.734,12.779 C16.454,13.087 16.43,13.576 15.677,13.869 L9.307,16.35 C8.553,16.643 7.358,16.633 6.633,16.326 L0.528,13.739 C-0.197,13.431 -0.173,12.947 0.581,12.654 L6.95,10.168 C7.704,9.874 8.9,9.884 9.624,10.192 L9.624,10.192 Z M31.492,10.373 L37.602,12.96 C38.327,13.268 38.298,13.753 37.544,14.05 L31.18,16.532 C30.426,16.825 29.226,16.814 28.506,16.508 L22.396,13.92 C21.671,13.613 21.7,13.129 22.453,12.831 L28.818,10.35 C29.573,10.057 30.773,10.067 31.492,10.373 L31.492,10.373 Z M20.544,4.974 L26.649,7.566 C27.374,7.869 27.349,8.358 26.596,8.651 L20.226,11.132 C19.472,11.43 18.272,11.415 17.552,11.112 L11.442,8.52 C10.722,8.213 10.746,7.728 11.5,7.435 L17.869,4.949 C18.624,4.656 19.82,4.666 20.544,4.974 L20.544,4.974 Z M53.366,10.076 L59.47,12.663 C60.196,12.971 60.171,13.455 59.418,13.748 L53.048,16.234 C52.295,16.527 51.1,16.517 50.375,16.21 L44.264,13.623 C43.544,13.315 43.569,12.826 44.323,12.533 L50.692,10.052 C51.446,9.759 52.641,9.769 53.366,10.076 L53.366,10.076 Z M42.893,5.156 L49.003,7.743 C49.723,8.051 49.699,8.535 48.945,8.833 L42.576,11.314 C41.822,11.607 40.627,11.597 39.902,11.29 L33.792,8.703 C33.071,8.395 33.096,7.911 33.85,7.618 L40.219,5.132 C40.973,4.839 42.168,4.849 42.893,5.156 L42.893,5.156 Z M31.94,0.237 L38.049,2.829 C38.774,3.131 38.745,3.621 37.991,3.914 L31.622,6.395 C30.868,6.692 29.673,6.683 28.948,6.375 L22.843,3.783 C22.118,3.48 22.142,2.991 22.896,2.698 L29.266,0.217 C30.02,-0.081 31.219,-0.071 31.94,0.237 L31.94,0.237 Z",
    snapPath = snap.path(snapCode);

$('#snap').hover(function () {
    snapPath.animate({d: snapCodeHover}, 1000, mina.bounce);
    }, function () {
    snapPath.animate({d: snapCode}, 1000, mina.bounce);
});

var snap2 = Snap('#snap2'),
    snap2code = "M330.93 398.85l12.73 5.4c1.5.64 1.45 1.65-.12 2.26l-13.27 5.18c-1.57.61-4.06.59-5.57-.05l-12.72-5.4c-1.51-.63-1.46-1.65.11-2.26l13.27-5.17c1.57-.62 4.07-.59 5.57.04zm-22.74 8.87l12.72 5.4c1.51.63 1.46 1.65-.11 2.26l-13.27 5.17c-1.57.62-4.07.6-5.57-.04l-12.73-5.4c-1.51-.63-1.45-1.65.12-2.26l13.27-5.17c1.57-.62 4.06-.6 5.57.04zm-21.82-9.24l12.73 5.39c1.5.64 1.45 1.65-.12 2.26l-13.27 5.18c-1.57.61-4.06.59-5.57-.05l-12.73-5.39c-1.5-.64-1.45-1.65.12-2.27l13.27-5.17c1.57-.61 4.06-.59 5.57.05zm-21.82-9.25l12.73 5.39c1.5.64 1.45 1.66-.12 2.27l-13.27 5.17c-1.57.61-4.06.59-5.57-.05l-12.72-5.39c-1.51-.64-1.46-1.65.11-2.26l13.27-5.18c1.57-.61 4.06-.59 5.57.05zm44.56.38l12.73 5.39c1.51.64 1.45 1.65-.12 2.27l-13.26 5.17c-1.57.61-4.07.59-5.57-.05l-12.73-5.39c-1.51-.64-1.45-1.65.12-2.27l13.26-5.17c1.57-.61 4.07-.59 5.57.05zm-21.81-9.25l12.72 5.4c1.51.63 1.46 1.65-.11 2.26l-13.27 5.17c-1.57.62-4.07.59-5.57-.04l-12.73-5.4c-1.5-.64-1.45-1.65.12-2.26l13.27-5.18c1.57-.61 4.06-.59 5.57.05zm66.38 9.63l12.72 5.39c1.51.64 1.46 1.65-.11 2.26l-13.27 5.18c-1.57.61-4.06.59-5.57-.05l-12.73-5.39c-1.5-.64-1.45-1.66.12-2.27l13.27-5.17c1.57-.61 4.06-.59 5.57.05zm-21.82-9.25l12.73 5.39c1.5.64 1.45 1.65-.12 2.27l-13.27 5.17c-1.57.61-4.06.59-5.57-.05l-12.73-5.39c-1.5-.64-1.45-1.65.12-2.26l13.27-5.18c1.57-.61 4.06-.59 5.57.05zm-21.82-9.25l12.73 5.4c1.51.63 1.45 1.65-.12 2.26l-13.27 5.17c-1.57.62-4.06.6-5.57-.04l-12.72-5.4c-1.51-.63-1.46-1.65.11-2.26l13.27-5.17c1.57-.62 4.07-.6 5.57.04z",
    snap2codeHover = "M332.9 400.4l12.7 5.4c1.5.6 1.5 1.6-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.6.1-2.3l13.3-5.2c1.6-.7 4.1-.7 5.6 0zm-24.7 9.8l12.7 5.4c1.5.6 1.5 1.6-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.6.1-2.3l13.3-5.2c1.6-.6 4.1-.6 5.6 0zm-22.8-10.2l12.7 5.4c1.5.6 1.5 1.6-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.6.1-2.3l13.3-5.2c1.6-.7 4.1-.7 5.6 0zm-21.9-10.3l12.7 5.4c1.5.6 1.5 1.7-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.6.1-2.3l13.3-5.2c1.6-.6 4.1-.6 5.6 0zm45.6.4l12.7 5.4c1.5.6 1.5 1.6-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.6.1-2.3l13.3-5.2c1.6-.6 4.1-.6 5.6 0zm-22.8-11.2l12.7 5.4c1.5.6 1.5 1.6-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.6.1-2.3l13.3-5.2c1.6-.7 4.1-.7 5.6 0zm68.4 10.6l12.7 5.4c1.5.6 1.5 1.6-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.7.1-2.3l13.3-5.2c1.6-.7 4.1-.6 5.6 0zm-21.8-10.3l12.7 5.4c1.5.6 1.5 1.6-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.6.1-2.3l13.3-5.2c1.6-.6 4.1-.6 5.6 0zm-22.9-10.2l12.7 5.4c1.5.6 1.5 1.6-.1 2.3l-13.3 5.2c-1.6.6-4.1.6-5.6 0l-12.7-5.4c-1.5-.6-1.5-1.6.1-2.3l13.3-5.2c1.6-.7 4.1-.6 5.6 0z",
    snap2path = snap2.path(snap2code);

$('#snap2').hover(function () {
    snap2path.animate({d: snap2codeHover}, 1000, mina.bounce);
    }, function () {
    snap2path.animate({d: snap2code}, 1000, mina.bounce);
});

var snap3 = Snap('#snap3'),
    snap3code = "M50,50H0V0h50V50z",
    snap3codeHover = "M50,25c0,13.8-11.2,25-25,25S0,38.8,0,25S11.2,0,25,0S50,11.2,50,25z",
    snap3path = snap3.path(snap3code);

$('#snap3').hover(function () {
    snap3path.animate({d: snap3codeHover}, 1000, mina.bounce);
    }, function () {
    snap3path.animate({d: snap3code}, 1000, mina.bounce);
});

Example on jsFiddle

我有一个图标（示例中的第一个块），当使用snapsvg.js（http://snapsvg.io/）进行悬停时进行转换，它可以正常工作。此图标的路径包含在js代码中。

我不知道是谁以及如何做到这一点，但现在我必须改变另一个图标。

我在网站源代码中有两个svg文件。这是这个图标的两个条件。 svg文件中的路径中的代码（如果与js中的路径不同）。 我把这段代码放在第二块的例子中，它不起作用。

我通过Adobe Illustrator CC创建简单的图标 - 必须转换为圆形的正方形。这是工作，但很糟糕（第3块）。使用不同的参数保存无济于事。图标不居中，不能缩放正确，没有像第一个例子那样的代码。

如何从Illustrator中保存路径以便与snapsvg.js一起使用？

1 个答案:

答案 0 :(得分：1)

解决

  1. 该脚本中的路径与Illustrator中的路径之间没有技术差异。 如果你需要在脚本中获取Path like Path - 从Photoshop导出svg。

  2. 重要的右侧视图框，用于避免显示问题。更多信息：https://css-tricks.com/scale-svg/

相关问题
最新问题