在包含路径

时间:2015-05-14 12:00:22

标签: css css3 svg css-animations

我有我svg看起来像的图片(我用插画家创建) enter image description here

我想要的是旋转动画圆圈的上半部分圆线(它有4条圆线,让我们说从圈子底部开始的第一个圆圈线)从左到右和下一个圆圈线从右到左的上圆线。以下是我的svg的代码。

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="700px" height="700px" viewBox="0 0 3000 3000" enable-background="new 0 0 3000 3000" xml:space="preserve">
    <g>
        <g>
            <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1375.631,54"/>
            <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1375.631,54
                C633.068,117.25,50.095,740.004,50.095,1498.942s582.974,1381.693,1325.536,1444.94"/>
            <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,2943.882
                c742.562-63.251,1325.534-686.003,1325.534-1444.94S2367.63,117.25,1625.068,54"/>
            <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,2943.882"/>
            <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,54"/>
        </g>
        <g>
            <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1395.021"/>
            <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M2643.479,1440.251h77.141
                c-30.628-647.454-565.236-1162.983-1220.269-1162.983c-655.036,0-1189.644,515.529-1220.271,1162.983h77.142"/>
            <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M2643.479,1440.251"/>
            <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1557.633"/>
            <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1557.633h-77.142
                c30.627,647.452,565.235,1162.982,1220.271,1162.982c655.032,0,1189.641-515.53,1220.269-1162.982h-77.141"/>
        </g>
        <g id="XMLID_1_">
            <g>
                <path fill="#00AEEF" d="M2903.798,1498.94c0,15.417-0.269,30.797-0.758,46.129h-122.333c0.551-15.308,0.831-30.688,0.831-46.129
                    c0-53.941-3.361-107.1-9.866-159.304l120.658-21.286C2899.959,1377.854,2903.798,1438.104,2903.798,1498.94z"/>
                <path fill="#00AEEF" d="M2779.937,1563.408h122.407c-3.338,74.248-12.422,147.519-27.228,219.505l-120.67-21.273
                    C2767.931,1697.185,2776.575,1630.98,2779.937,1563.408z"/>
                <path fill="#00AEEF" d="M2889.885,1300.158l-120.608,21.273c-9.341-67.121-23.914-132.591-43.28-195.995l115.327-41.972
                    C2863.281,1154.303,2879.48,1226.644,2889.885,1300.158z"/>
                <path fill="#00AEEF" d="M2750.558,1779.575l120.744,21.285c-15.674,71.474-36.983,141.65-63.893,210.214l-115.23-41.936
                    C2716.35,1908.095,2735.936,1844.764,2750.558,1779.575z"/>
                <path fill="#00AEEF" d="M2835.761,1065.97l-115.242,41.947c-20.784-64.688-46.568-127.15-76.913-186.922l106.39-61.436
                    c15.649,30.528,30.174,61.594,43.488,93.076C2809.267,989.937,2823.352,1027.727,2835.761,1065.97z"/>
                <path fill="#00AEEF" d="M2685.296,1986.146l115.303,41.972c-2.335,5.722-4.694,11.431-7.115,17.128
                    c-25.895,61.253-56.35,120.891-90.839,178.035l-106.317-61.375C2630.291,2105.972,2660.086,2047.238,2685.296,1986.146z"/>
                <path fill="#00AEEF" d="M2741.511,843.286l-106.329,61.387c-31.788-60.47-68.27-118.103-108.97-172.423l94.2-79.041
                    c15.1,19.977,29.686,40.309,43.672,61.008C2692.154,755.772,2718.024,798.93,2741.511,843.286z"/>
                <path fill="#00AEEF" d="M2586.693,2177.519l106.366,61.411c-9.378,15.099-19.036,30.026-28.976,44.747
                    c-30.639,45.334-64.052,89.017-99.874,130.622l-94.104-78.968C2512.824,2285.877,2551.837,2233.122,2586.693,2177.519z"/>
                <path fill="#00AEEF" d="M2609.25,638.648l-94.152,79.004c-42.008-54.442-88.296-105.412-138.349-152.421l79.09-94.25
                    c12.52,11.639,24.831,23.499,36.897,35.565C2534.231,548.041,2573.196,592.263,2609.25,638.648z"/>
                <path fill="#00AEEF" d="M2458.027,2349.134l94.128,78.992c-19.171,21.677-38.989,42.779-59.419,63.208
                    c-36.151,36.152-74.37,70.41-114.3,102.467l-78.98-94.116C2356.479,2454.058,2409.551,2403.687,2458.027,2349.134z"/>
                <path fill="#00AEEF" d="M2442.305,458.572l-79.028,94.176c-56.374-51.459-117.357-97.954-182.24-138.801l61.435-106.402
                    c14.378,8.974,28.585,18.192,42.608,27.667C2340.193,372.452,2392.863,413.788,2442.305,458.572z"/>
                <path fill="#00AEEF" d="M2285.055,2511.043l79.004,94.152c-25.687,20.087-52.046,39.281-78.979,57.486
                    c-33.084,22.349-67.182,43.304-102.1,62.768l-61.362-106.28C2178.933,2587.26,2233.546,2551.07,2285.055,2511.043z"/>
                <path fill="#00AEEF" d="M2226.834,297.935l-61.387,106.329c-58.696-35.785-120.486-66.986-184.856-93.113l41.96-115.254
                    c8.057,3.24,16.089,6.517,24.109,9.903C2108.67,232.037,2169.029,262.919,2226.834,297.935z"/>
                <path fill="#00AEEF" d="M2105.528,2627.972l61.374,106.305c-39.196,21.188-79.358,40.518-120.242,57.805
                    c-25.626,10.845-51.483,20.87-77.562,30.112l-41.911-115.156C1988.929,2685.152,2048.506,2658.646,2105.528,2627.972z"/>
                <path fill="#00AEEF" d="M2005.471,189.172l-41.935,115.205c-64.053-24.917-130.586-44.833-199.125-59.247l21.273-120.67
                    C1860.459,139.902,1933.826,161.505,2005.471,189.172z"/>
                <path fill="#00AEEF" d="M1909.852,2713.04l41.923,115.181c-68.331,23.242-138.129,41.055-209.101,53.403l-21.261-120.597
                    C1786.002,2749.755,1848.954,2733.629,1909.852,2713.04z"/>
                <path fill="#00AEEF" d="M1767.7,120.866l-21.273,120.609c-67.438-13.167-136.747-21.029-207.486-23.131V96.023
                    C1616.318,98.089,1692.682,106.402,1767.7,120.866z"/>
                <path fill="#00AEEF" d="M1703.318,2764.06l21.261,120.584c-61.093,9.793-123.03,15.552-185.639,17.227v-122.32
                    C1594.69,2777.887,1649.561,2772.642,1703.318,2764.06z"/>
                <path fill="#00AEEF" d="M1520.602,2779.965v122.284c-6.749,0.086-13.498,0.146-20.247,0.146
                    c-68.135,0-135.525-4.816-201.961-14.377l21.273-120.585c59.039,8.362,119.362,12.703,180.688,12.703
                    C1507.116,2780.137,1513.864,2780.075,1520.602,2779.965z"/>
                <path fill="#00AEEF" d="M1520.602,95.644v122.284c-6.737-0.11-13.485-0.183-20.247-0.183c-76.375,0-151.199,6.736-223.931,19.61
                    l-21.273-120.597c80.374-14.146,162.239-21.273,245.204-21.273C1507.104,95.485,1513.864,95.546,1520.602,95.644z"/>
                <path fill="#00AEEF" d="M1301.512,2764.72l-21.261,120.572c-73.821-11.615-146.431-29.11-217.476-52.449l41.935-115.206
                    C1168.285,2738.336,1234.037,2754.156,1301.512,2764.72z"/>
                <path fill="#00AEEF" d="M1237.118,120.059l21.261,120.609c-71.473,13.718-140.843,33.401-207.584,58.501l-41.923-115.193
                    C1083.242,156.138,1159.458,134.792,1237.118,120.059z"/>
                <path fill="#00AEEF" d="M1087.301,2711.83l-41.911,115.168c-30.761-10.551-61.216-22.165-91.353-34.917
                    c-38.867-16.444-77.085-34.734-114.435-54.699l61.374-106.305C960.468,2662.706,1022.735,2689.774,1087.301,2711.83z"/>
                <path fill="#00AEEF" d="M991.73,190.529l41.935,115.206c-67.194,26.383-131.649,58.281-192.779,95.13L779.5,294.56
                    c56.093-33.621,114.545-63.379,174.538-88.76C966.544,200.518,979.113,195.432,991.73,190.529z"/>
                <path fill="#00AEEF" d="M884.838,2622.348l-61.362,106.28c-36.923-20.368-72.953-42.375-107.858-65.946
                    c-20.943-14.158-41.531-28.927-61.729-44.222l79.041-94.201C781.064,2560.374,831.814,2593.177,884.838,2622.348z"/>
                <path fill="#00AEEF" d="M763.826,304.097l61.411,106.354c-60.788,37.827-118.188,80.618-171.628,127.786l-78.98-94.127
                    c44.686-39.246,91.866-75.703,140.99-108.897C731.464,324.514,747.553,314.146,763.826,304.097z"/>
                <path fill="#00AEEF" d="M718.321,2513.121l-78.992,94.152c-46.128-35.884-90.105-74.664-131.368-115.939
                    c-11.859-11.858-23.511-23.938-34.954-36.225l94.262-79.103C613.899,2425.583,664.404,2471.455,718.321,2513.121z"/>
                <path fill="#00AEEF" d="M560.912,456.31l79.016,94.152c-47.241,42.889-91.254,89.262-131.673,138.679l-94.091-78.955
                    c29.55-36.079,60.873-70.715,93.798-103.64C525.15,489.356,542.829,472.607,560.912,456.31z"/>
                <path fill="#00AEEF" d="M554.774,2362.546l-94.189,79.041c-45.016-49.649-86.56-102.552-123.971-157.91
                    c-4.976-7.373-9.854-14.794-14.695-22.264l106.476-61.473C466.172,2257.525,508.474,2311.894,554.774,2362.546z"/>
                <path fill="#00AEEF" d="M402.622,624.454l94.127,78.979c-44.258,55.702-83.968,115.157-118.592,177.814l-106.28-61.362
                    c20.026-36.165,41.629-71.461,64.736-105.669C357.374,683.493,379.429,653.527,402.622,624.454z"/>
                <path fill="#00AEEF" d="M418.43,2184.512l-106.391,61.436c-40.297-63.979-75.483-131.307-104.825-200.702
                    c-0.379-0.88-0.734-1.76-1.101-2.641l115.364-41.996C348.876,2064.758,381.373,2126.218,418.43,2184.512z"/>
                <path fill="#00AEEF" d="M263.087,835.987l106.305,61.375c-33.291,62.34-61.582,127.737-84.322,195.652l-115.218-41.935
                    c11.175-33.169,23.633-65.996,37.363-98.443C223.976,912.999,242.657,874.047,263.087,835.987z"/>
                <path fill="#00AEEF" d="M314.375,1983.676l-115.267,41.959c-29.085-71.754-52.009-145.293-68.722-220.275l120.768-21.297
                    C266.84,1852.857,288.077,1919.563,314.375,1983.676z"/>
                <path fill="#00AEEF" d="M164.105,1068.513l115.267,41.948c-21.249,66.619-37.191,135.586-47.302,206.411l-120.597-21.261
                    C122.647,1218.477,140.191,1142.651,164.105,1068.513z"/>
                <path fill="#00AEEF" d="M247.206,1766.139l-120.695,21.286c-15.344-73.441-24.746-148.229-28.157-224.017h122.407
                    C224.208,1632.558,233.17,1700.277,247.206,1766.139z"/>
                <path fill="#00AEEF" d="M108.966,1313.791l120.622,21.273c-6.883,53.672-10.429,108.371-10.429,163.877
                    c0,15.441,0.281,30.821,0.831,46.129H97.657c-0.489-15.332-0.758-30.712-0.758-46.129
                    C96.899,1436.551,100.946,1374.773,108.966,1313.791z"/>
            </g>
            <g>
            </g>
        </g>
        <g>
            <path fill="#00AEEF" d="M714.827,655.783c11.458-10.68,23.14-21.121,35.024-31.334l-15.507-19.669
                c-12.194,10.472-24.206,21.196-36.011,32.197L714.827,655.783z"/>
            <path fill="#00AEEF" d="M763.862,612.598c12.066-10.043,24.33-19.854,36.803-29.407l-14.468-20.471
                c-12.806,9.794-25.414,19.873-37.839,30.211L763.862,612.598z"/>
            <path fill="#00AEEF" d="M624.686,749.812c10.139-11.834,20.502-23.47,31.103-34.881l-17.471-17.935
                c-10.941,11.743-21.607,23.689-32.024,35.815L624.686,749.812z"/>
            <path fill="#00AEEF" d="M511.15,907.297c7.944-13.233,16.137-26.299,24.59-39.182l-20.097-15.006
                c-8.707,13.253-17.127,26.691-25.289,40.292L511.15,907.297z"/>
            <path fill="#00AEEF" d="M583.821,800.284c9.433-12.346,19.11-24.493,29.024-36.44l-18.404-17.013
                c-10.229,12.288-20.208,24.754-29.902,37.416L583.821,800.284z"/>
            <path fill="#00AEEF" d="M479.525,963.445c7.167-13.606,14.6-27.049,22.288-40.327l-20.789-13.89
                c-7.907,13.66-15.561,27.478-22.923,41.47L479.525,963.445z"/>
            <path fill="#00AEEF" d="M451.192,1021.114c6.369-13.93,13.011-27.71,19.913-41.336l-21.417-12.742
                c-7.096,14.013-13.917,28.188-20.468,42.518L451.192,1021.114z"/>
            <path fill="#00AEEF" d="M545.939,852.842c8.701-12.812,17.659-25.435,26.855-37.873l-19.293-16.045
                c-9.482,12.794-18.696,25.771-27.639,38.928L545.939,852.842z"/>
            <path fill="#00AEEF" d="M924.925,500.173c13.651-7.895,27.481-15.517,41.478-22.862l-11.009-22.323
                c-14.395,7.517-28.62,15.319-42.664,23.411L924.925,500.173z"/>
            <path fill="#00AEEF" d="M421.698,1026.322c-2.088,4.762-4.153,9.538-6.181,14.333c-49.052,115.971-78.764,237.712-88.737,363.029
                h24.582c10.607-129.072,42.545-252.194,92.308-365.804L421.698,1026.322z"/>
            <path fill="#00AEEF" d="M2649.337,1594.199c-14.892,181.217-71.867,350.691-161.118,498.604l22.143,11.651
                c28.249-47.074,53.238-96.199,74.821-147.227c49.051-115.972,78.764-237.713,88.736-363.028H2649.337z"/>
            <path fill="#00AEEF" d="M668.395,701.584c10.813-11.277,21.856-22.334,33.116-33.167l-16.5-18.813
                c-5.772,5.546-11.508,11.143-17.184,16.817c-5.697,5.698-11.315,11.457-16.882,17.252L668.395,701.584z"/>
            <path fill="#00AEEF" d="M1094.746,393.312l8.554,23.185c14.823-5.455,29.793-10.602,44.893-15.458l-7.327-23.594
                C1125.403,382.407,1110.029,387.696,1094.746,393.312z"/>
            <path fill="#00AEEF" d="M982.714,468.923c14.093-7.11,28.343-13.955,42.758-20.497l-9.788-22.779
                c-14.826,6.697-29.476,13.704-43.964,20.984L982.714,468.923z"/>
            <path fill="#00AEEF" d="M1042.238,440.99c14.483-6.297,29.123-12.298,43.906-18.009l-8.56-23.2
                c-11.896,4.584-23.742,9.346-35.523,14.328c-3.21,1.357-6.403,2.744-9.599,4.129L1042.238,440.99z"/>
            <path fill="#00AEEF" d="M869.068,534.63c13.164-8.647,26.523-17.022,40.055-25.138l-12.21-21.801
                C883,496,869.26,504.583,855.71,513.461L869.068,534.63z"/>
            <path fill="#00AEEF" d="M815.328,572.162c12.636-9.364,25.465-18.48,38.488-27.333l-13.369-21.186
                c-13.38,9.071-26.574,18.427-39.58,28.057L815.328,572.162z"/>
            <path fill="#00AEEF" d="M2447.525,2155.576c-7.213,10.371-14.592,20.611-22.13,30.73l20.854,13.936
                c7.796-10.49,15.42-21.095,22.854-31.828L2447.525,2155.576z"/>
            <path fill="#00AEEF" d="M2302.807,2325.975c-8.901,8.639-17.933,17.145-27.109,25.497l17.455,17.918
                c9.47-8.641,18.817-17.45,28.038-26.424L2302.807,2325.975z"/>
            <path fill="#00AEEF" d="M2414.304,2200.953c-7.667,9.958-15.492,19.789-23.472,29.486l20.082,14.996
                c8.265-10.052,16.355-20.23,24.266-30.531L2414.304,2200.953z"/>
            <path fill="#00AEEF" d="M2341.849,2286.224c-8.513,9.092-17.163,18.054-25.961,26.865l18.36,16.972
                c9.121-9.147,18.071-18.421,26.857-27.822L2341.849,2286.224z"/>
            <path fill="#00AEEF" d="M2379.047,2244.527c-8.102,9.531-16.348,18.936-24.748,28.195l19.244,16.006
                c8.705-9.605,17.237-19.339,25.6-29.195L2379.047,2244.527z"/>
            <path fill="#00AEEF" d="M1832.029,2603.217c-105.083,31.622-216.431,48.635-331.68,48.635
                c-603.643,0-1100.398-466.33-1148.989-1057.652h-24.582c9.974,125.315,39.686,247.057,88.737,363.028
                c59.299,140.2,144.19,266.11,252.312,374.233c108.124,108.124,234.035,193.012,374.234,252.315
                c145.16,61.396,299.35,92.527,458.288,92.527c116.091,0,229.645-16.63,339.001-49.513L1832.029,2603.217z"/>
            <path fill="#00AEEF" d="M1165.698,395.571c105.955-32.198,218.313-49.539,334.652-49.539
                c603.642,0,1100.397,466.329,1148.987,1057.652h24.582c-9.973-125.317-39.686-247.058-88.736-363.029
                c-59.301-140.2-144.192-266.111-252.313-374.234c-108.122-108.123-234.034-193.013-374.234-252.313
                c-145.159-61.397-299.348-92.528-458.285-92.528c-117.145,0-231.704,16.934-341.975,50.41L1165.698,395.571z"/>
            <path fill="#00AEEF" d="M1892.773,2609.323l-8.553-23.179c-11.475,4.063-23.037,7.935-34.675,11.641l7.324,23.586
                C1868.891,2617.551,1880.859,2613.54,1892.773,2609.323z"/>
            <path fill="#00AEEF" d="M2478.611,2108.471c-6.734,10.768-13.649,21.407-20.723,31.932l21.545,12.817
                c7.303-10.908,14.43-21.931,21.361-33.078L2478.611,2108.471z"/>
            <path fill="#00AEEF" d="M2083.276,2493.331c-10.54,6.202-21.186,12.245-31.937,18.116l12.174,21.736
                c11.139-6.066,22.172-12.306,33.096-18.725L2083.276,2493.331z"/>
            <path fill="#00AEEF" d="M1985.896,2544.547c-11.051,5.15-22.201,10.124-33.439,14.934l9.774,22.748
                c11.643-4.971,23.195-10.109,34.64-15.433L1985.896,2544.547z"/>
            <path fill="#00AEEF" d="M2035.172,2520.115c-10.807,5.683-21.714,11.194-32.719,16.541l10.981,22.268
                c11.406-5.521,22.71-11.211,33.905-17.086L2035.172,2520.115z"/>
            <path fill="#00AEEF" d="M2262.018,2363.711c-9.271,8.177-18.665,16.215-28.197,24.092l16.51,18.826
                c9.845-8.156,19.568-16.479,29.17-24.972L2262.018,2363.711z"/>
            <path fill="#00AEEF" d="M1935.545,2566.574c-11.272,4.614-22.643,9.033-34.092,13.297l8.556,23.188
                c11.823-4.393,23.596-8.963,35.307-13.748L1935.545,2566.574z"/>
            <path fill="#00AEEF" d="M2219.574,2399.375c-9.617,7.7-19.354,15.257-29.221,22.651l15.508,19.671
                c10.2-7.652,20.284-15.473,30.246-23.471L2219.574,2399.375z"/>
            <path fill="#00AEEF" d="M2175.574,2432.904c-9.946,7.213-20.006,14.277-30.188,21.176l14.448,20.444
                c10.536-7.137,20.961-14.446,31.264-21.925L2175.574,2432.904z"/>
            <path fill="#00AEEF" d="M2130.11,2464.242c-10.255,6.711-20.617,13.271-31.094,19.664l13.335,21.129
                c10.85-6.606,21.589-13.384,32.215-20.341L2130.11,2464.242z"/>
        </g>
        <g>
            <path fill="#00AEEF" d="M2600.148,2439.238l75.949-13.516c201.208-254.912,321.304-576.818,321.304-926.781
                c0-115.553-13.102-228.042-37.882-336.077l-60.659-36.077c31.612,118.866,48.481,243.74,48.481,372.559
                C2947.342,1858.194,2816.589,2186.49,2600.148,2439.238z"/>
            <path fill="#00AEEF" d="M580.414,2613.735C259.956,2348.547,55.777,1947.793,55.777,1499.347
                c0-574.105,334.625-1070.053,819.473-1303.448H762.825C309.303,453.146,3.297,940.298,3.297,1498.942
                c0,445.579,194.667,845.69,503.59,1119.93L580.414,2613.735z"/>
        </g>
        <polyline fill="#00AEEF" points="2002.903,440.99 1996.871,572.727 2118.385,500.173  "/>
        <polyline fill="#00AEEF" points="934.566,2378.094 815.834,2435.484 937.477,2507.826     "/>
    </g>
    </svg>

如何让我的svg动画(从左到右的圆圈线4和从右到左的圆圈线3)?

1 个答案:

答案 0 :(得分:1)

隔离要设置动画的元素或组g并确保其具有ID(如果您在Illustrator中命名图层,则应将这些名称导出为ID我相信

定义关键帧动画(为了简洁而

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

将它应用于相关元素(本例中只有一个)

#XMLID_1_ {
  animation: spin 12s linear infinite;
  animation-direction:reverse; /* note below */
  transform-origin: center;
}

注意:动画被定义为顺时针工作。但是,它可以用于与animation-direction属性相反的方向运行。

#Layer_1 {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  display: block;
}
#XMLID_1_ {
  animation: spin 12s linear infinite;
  animation-direction: reverse;
  transform-origin: center;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 3000 3000" enable-background="new 0 0 3000 3000" xml:space="preserve">
  <g>
    <g>
      <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1375.631,54" />
      <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1375.631,54
                C633.068,117.25,50.095,740.004,50.095,1498.942s582.974,1381.693,1325.536,1444.94" />
      <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,2943.882
                c742.562-63.251,1325.534-686.003,1325.534-1444.94S2367.63,117.25,1625.068,54" />
      <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,2943.882" />
      <path fill="none" stroke="#00AEEF" stroke-width="10" stroke-miterlimit="10" d="M1625.068,54" />
    </g>
    <g>
      <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1395.021" />
      <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M2643.479,1440.251h77.141
                c-30.628-647.454-565.236-1162.983-1220.269-1162.983c-655.036,0-1189.644,515.529-1220.271,1162.983h77.142" />
      <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M2643.479,1440.251" />
      <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1557.633" />
      <path fill="none" stroke="#00AEEF" stroke-width="7" stroke-miterlimit="10" d="M357.221,1557.633h-77.142
                c30.627,647.452,565.235,1162.982,1220.271,1162.982c655.032,0,1189.641-515.53,1220.269-1162.982h-77.141" />
    </g>

    <g id="XMLID_1_">
      <g>
        <path fill="#00AEEF" d="M2903.798,1498.94c0,15.417-0.269,30.797-0.758,46.129h-122.333c0.551-15.308,0.831-30.688,0.831-46.129
                    c0-53.941-3.361-107.1-9.866-159.304l120.658-21.286C2899.959,1377.854,2903.798,1438.104,2903.798,1498.94z" />
        <path fill="#00AEEF" d="M2779.937,1563.408h122.407c-3.338,74.248-12.422,147.519-27.228,219.505l-120.67-21.273
                    C2767.931,1697.185,2776.575,1630.98,2779.937,1563.408z" />
        <path fill="#00AEEF" d="M2889.885,1300.158l-120.608,21.273c-9.341-67.121-23.914-132.591-43.28-195.995l115.327-41.972
                    C2863.281,1154.303,2879.48,1226.644,2889.885,1300.158z" />
        <path fill="#00AEEF" d="M2750.558,1779.575l120.744,21.285c-15.674,71.474-36.983,141.65-63.893,210.214l-115.23-41.936
                    C2716.35,1908.095,2735.936,1844.764,2750.558,1779.575z" />
        <path fill="#00AEEF" d="M2835.761,1065.97l-115.242,41.947c-20.784-64.688-46.568-127.15-76.913-186.922l106.39-61.436
                    c15.649,30.528,30.174,61.594,43.488,93.076C2809.267,989.937,2823.352,1027.727,2835.761,1065.97z" />
        <path fill="#00AEEF" d="M2685.296,1986.146l115.303,41.972c-2.335,5.722-4.694,11.431-7.115,17.128
                    c-25.895,61.253-56.35,120.891-90.839,178.035l-106.317-61.375C2630.291,2105.972,2660.086,2047.238,2685.296,1986.146z" />
        <path fill="#00AEEF" d="M2741.511,843.286l-106.329,61.387c-31.788-60.47-68.27-118.103-108.97-172.423l94.2-79.041
                    c15.1,19.977,29.686,40.309,43.672,61.008C2692.154,755.772,2718.024,798.93,2741.511,843.286z" />
        <path fill="#00AEEF" d="M2586.693,2177.519l106.366,61.411c-9.378,15.099-19.036,30.026-28.976,44.747
                    c-30.639,45.334-64.052,89.017-99.874,130.622l-94.104-78.968C2512.824,2285.877,2551.837,2233.122,2586.693,2177.519z" />
        <path fill="#00AEEF" d="M2609.25,638.648l-94.152,79.004c-42.008-54.442-88.296-105.412-138.349-152.421l79.09-94.25
                    c12.52,11.639,24.831,23.499,36.897,35.565C2534.231,548.041,2573.196,592.263,2609.25,638.648z" />
        <path fill="#00AEEF" d="M2458.027,2349.134l94.128,78.992c-19.171,21.677-38.989,42.779-59.419,63.208
                    c-36.151,36.152-74.37,70.41-114.3,102.467l-78.98-94.116C2356.479,2454.058,2409.551,2403.687,2458.027,2349.134z" />
        <path fill="#00AEEF" d="M2442.305,458.572l-79.028,94.176c-56.374-51.459-117.357-97.954-182.24-138.801l61.435-106.402
                    c14.378,8.974,28.585,18.192,42.608,27.667C2340.193,372.452,2392.863,413.788,2442.305,458.572z" />
        <path fill="#00AEEF" d="M2285.055,2511.043l79.004,94.152c-25.687,20.087-52.046,39.281-78.979,57.486
                    c-33.084,22.349-67.182,43.304-102.1,62.768l-61.362-106.28C2178.933,2587.26,2233.546,2551.07,2285.055,2511.043z" />
        <path fill="#00AEEF" d="M2226.834,297.935l-61.387,106.329c-58.696-35.785-120.486-66.986-184.856-93.113l41.96-115.254
                    c8.057,3.24,16.089,6.517,24.109,9.903C2108.67,232.037,2169.029,262.919,2226.834,297.935z" />
        <path fill="#00AEEF" d="M2105.528,2627.972l61.374,106.305c-39.196,21.188-79.358,40.518-120.242,57.805
                    c-25.626,10.845-51.483,20.87-77.562,30.112l-41.911-115.156C1988.929,2685.152,2048.506,2658.646,2105.528,2627.972z" />
        <path fill="#00AEEF" d="M2005.471,189.172l-41.935,115.205c-64.053-24.917-130.586-44.833-199.125-59.247l21.273-120.67
                    C1860.459,139.902,1933.826,161.505,2005.471,189.172z" />
        <path fill="#00AEEF" d="M1909.852,2713.04l41.923,115.181c-68.331,23.242-138.129,41.055-209.101,53.403l-21.261-120.597
                    C1786.002,2749.755,1848.954,2733.629,1909.852,2713.04z" />
        <path fill="#00AEEF" d="M1767.7,120.866l-21.273,120.609c-67.438-13.167-136.747-21.029-207.486-23.131V96.023
                    C1616.318,98.089,1692.682,106.402,1767.7,120.866z" />
        <path fill="#00AEEF" d="M1703.318,2764.06l21.261,120.584c-61.093,9.793-123.03,15.552-185.639,17.227v-122.32
                    C1594.69,2777.887,1649.561,2772.642,1703.318,2764.06z" />
        <path fill="#00AEEF" d="M1520.602,2779.965v122.284c-6.749,0.086-13.498,0.146-20.247,0.146
                    c-68.135,0-135.525-4.816-201.961-14.377l21.273-120.585c59.039,8.362,119.362,12.703,180.688,12.703
                    C1507.116,2780.137,1513.864,2780.075,1520.602,2779.965z" />
        <path fill="#00AEEF" d="M1520.602,95.644v122.284c-6.737-0.11-13.485-0.183-20.247-0.183c-76.375,0-151.199,6.736-223.931,19.61
                    l-21.273-120.597c80.374-14.146,162.239-21.273,245.204-21.273C1507.104,95.485,1513.864,95.546,1520.602,95.644z" />
        <path fill="#00AEEF" d="M1301.512,2764.72l-21.261,120.572c-73.821-11.615-146.431-29.11-217.476-52.449l41.935-115.206
                    C1168.285,2738.336,1234.037,2754.156,1301.512,2764.72z" />
        <path fill="#00AEEF" d="M1237.118,120.059l21.261,120.609c-71.473,13.718-140.843,33.401-207.584,58.501l-41.923-115.193
                    C1083.242,156.138,1159.458,134.792,1237.118,120.059z" />
        <path fill="#00AEEF" d="M1087.301,2711.83l-41.911,115.168c-30.761-10.551-61.216-22.165-91.353-34.917
                    c-38.867-16.444-77.085-34.734-114.435-54.699l61.374-106.305C960.468,2662.706,1022.735,2689.774,1087.301,2711.83z" />
        <path fill="#00AEEF" d="M991.73,190.529l41.935,115.206c-67.194,26.383-131.649,58.281-192.779,95.13L779.5,294.56
                    c56.093-33.621,114.545-63.379,174.538-88.76C966.544,200.518,979.113,195.432,991.73,190.529z" />
        <path fill="#00AEEF" d="M884.838,2622.348l-61.362,106.28c-36.923-20.368-72.953-42.375-107.858-65.946
                    c-20.943-14.158-41.531-28.927-61.729-44.222l79.041-94.201C781.064,2560.374,831.814,2593.177,884.838,2622.348z" />
        <path fill="#00AEEF" d="M763.826,304.097l61.411,106.354c-60.788,37.827-118.188,80.618-171.628,127.786l-78.98-94.127
                    c44.686-39.246,91.866-75.703,140.99-108.897C731.464,324.514,747.553,314.146,763.826,304.097z" />
        <path fill="#00AEEF" d="M718.321,2513.121l-78.992,94.152c-46.128-35.884-90.105-74.664-131.368-115.939
                    c-11.859-11.858-23.511-23.938-34.954-36.225l94.262-79.103C613.899,2425.583,664.404,2471.455,718.321,2513.121z" />
        <path fill="#00AEEF" d="M560.912,456.31l79.016,94.152c-47.241,42.889-91.254,89.262-131.673,138.679l-94.091-78.955
                    c29.55-36.079,60.873-70.715,93.798-103.64C525.15,489.356,542.829,472.607,560.912,456.31z" />
        <path fill="#00AEEF" d="M554.774,2362.546l-94.189,79.041c-45.016-49.649-86.56-102.552-123.971-157.91
                    c-4.976-7.373-9.854-14.794-14.695-22.264l106.476-61.473C466.172,2257.525,508.474,2311.894,554.774,2362.546z" />
        <path fill="#00AEEF" d="M402.622,624.454l94.127,78.979c-44.258,55.702-83.968,115.157-118.592,177.814l-106.28-61.362
                    c20.026-36.165,41.629-71.461,64.736-105.669C357.374,683.493,379.429,653.527,402.622,624.454z" />
        <path fill="#00AEEF" d="M418.43,2184.512l-106.391,61.436c-40.297-63.979-75.483-131.307-104.825-200.702
                    c-0.379-0.88-0.734-1.76-1.101-2.641l115.364-41.996C348.876,2064.758,381.373,2126.218,418.43,2184.512z" />
        <path fill="#00AEEF" d="M263.087,835.987l106.305,61.375c-33.291,62.34-61.582,127.737-84.322,195.652l-115.218-41.935
                    c11.175-33.169,23.633-65.996,37.363-98.443C223.976,912.999,242.657,874.047,263.087,835.987z" />
        <path fill="#00AEEF" d="M314.375,1983.676l-115.267,41.959c-29.085-71.754-52.009-145.293-68.722-220.275l120.768-21.297
                    C266.84,1852.857,288.077,1919.563,314.375,1983.676z" />
        <path fill="#00AEEF" d="M164.105,1068.513l115.267,41.948c-21.249,66.619-37.191,135.586-47.302,206.411l-120.597-21.261
                    C122.647,1218.477,140.191,1142.651,164.105,1068.513z" />
        <path fill="#00AEEF" d="M247.206,1766.139l-120.695,21.286c-15.344-73.441-24.746-148.229-28.157-224.017h122.407
                    C224.208,1632.558,233.17,1700.277,247.206,1766.139z" />
        <path fill="#00AEEF" d="M108.966,1313.791l120.622,21.273c-6.883,53.672-10.429,108.371-10.429,163.877
                    c0,15.441,0.281,30.821,0.831,46.129H97.657c-0.489-15.332-0.758-30.712-0.758-46.129
                    C96.899,1436.551,100.946,1374.773,108.966,1313.791z" />
      </g>
      <g>
      </g>
    </g>
    <g>
      <path fill="#00AEEF" d="M714.827,655.783c11.458-10.68,23.14-21.121,35.024-31.334l-15.507-19.669
                c-12.194,10.472-24.206,21.196-36.011,32.197L714.827,655.783z" />
      <path fill="#00AEEF" d="M763.862,612.598c12.066-10.043,24.33-19.854,36.803-29.407l-14.468-20.471
                c-12.806,9.794-25.414,19.873-37.839,30.211L763.862,612.598z" />
      <path fill="#00AEEF" d="M624.686,749.812c10.139-11.834,20.502-23.47,31.103-34.881l-17.471-17.935
                c-10.941,11.743-21.607,23.689-32.024,35.815L624.686,749.812z" />
      <path fill="#00AEEF" d="M511.15,907.297c7.944-13.233,16.137-26.299,24.59-39.182l-20.097-15.006
                c-8.707,13.253-17.127,26.691-25.289,40.292L511.15,907.297z" />
      <path fill="#00AEEF" d="M583.821,800.284c9.433-12.346,19.11-24.493,29.024-36.44l-18.404-17.013
                c-10.229,12.288-20.208,24.754-29.902,37.416L583.821,800.284z" />
      <path fill="#00AEEF" d="M479.525,963.445c7.167-13.606,14.6-27.049,22.288-40.327l-20.789-13.89
                c-7.907,13.66-15.561,27.478-22.923,41.47L479.525,963.445z" />
      <path fill="#00AEEF" d="M451.192,1021.114c6.369-13.93,13.011-27.71,19.913-41.336l-21.417-12.742
                c-7.096,14.013-13.917,28.188-20.468,42.518L451.192,1021.114z" />
      <path fill="#00AEEF" d="M545.939,852.842c8.701-12.812,17.659-25.435,26.855-37.873l-19.293-16.045
                c-9.482,12.794-18.696,25.771-27.639,38.928L545.939,852.842z" />
      <path fill="#00AEEF" d="M924.925,500.173c13.651-7.895,27.481-15.517,41.478-22.862l-11.009-22.323
                c-14.395,7.517-28.62,15.319-42.664,23.411L924.925,500.173z" />
      <path fill="#00AEEF" d="M421.698,1026.322c-2.088,4.762-4.153,9.538-6.181,14.333c-49.052,115.971-78.764,237.712-88.737,363.029
                h24.582c10.607-129.072,42.545-252.194,92.308-365.804L421.698,1026.322z" />
      <path fill="#00AEEF" d="M2649.337,1594.199c-14.892,181.217-71.867,350.691-161.118,498.604l22.143,11.651
                c28.249-47.074,53.238-96.199,74.821-147.227c49.051-115.972,78.764-237.713,88.736-363.028H2649.337z" />
      <path fill="#00AEEF" d="M668.395,701.584c10.813-11.277,21.856-22.334,33.116-33.167l-16.5-18.813
                c-5.772,5.546-11.508,11.143-17.184,16.817c-5.697,5.698-11.315,11.457-16.882,17.252L668.395,701.584z" />
      <path fill="#00AEEF" d="M1094.746,393.312l8.554,23.185c14.823-5.455,29.793-10.602,44.893-15.458l-7.327-23.594
                C1125.403,382.407,1110.029,387.696,1094.746,393.312z" />
      <path fill="#00AEEF" d="M982.714,468.923c14.093-7.11,28.343-13.955,42.758-20.497l-9.788-22.779
                c-14.826,6.697-29.476,13.704-43.964,20.984L982.714,468.923z" />
      <path fill="#00AEEF" d="M1042.238,440.99c14.483-6.297,29.123-12.298,43.906-18.009l-8.56-23.2
                c-11.896,4.584-23.742,9.346-35.523,14.328c-3.21,1.357-6.403,2.744-9.599,4.129L1042.238,440.99z" />
      <path fill="#00AEEF" d="M869.068,534.63c13.164-8.647,26.523-17.022,40.055-25.138l-12.21-21.801
                C883,496,869.26,504.583,855.71,513.461L869.068,534.63z" />
      <path fill="#00AEEF" d="M815.328,572.162c12.636-9.364,25.465-18.48,38.488-27.333l-13.369-21.186
                c-13.38,9.071-26.574,18.427-39.58,28.057L815.328,572.162z" />
      <path fill="#00AEEF" d="M2447.525,2155.576c-7.213,10.371-14.592,20.611-22.13,30.73l20.854,13.936
                c7.796-10.49,15.42-21.095,22.854-31.828L2447.525,2155.576z" />
      <path fill="#00AEEF" d="M2302.807,2325.975c-8.901,8.639-17.933,17.145-27.109,25.497l17.455,17.918
                c9.47-8.641,18.817-17.45,28.038-26.424L2302.807,2325.975z" />
      <path fill="#00AEEF" d="M2414.304,2200.953c-7.667,9.958-15.492,19.789-23.472,29.486l20.082,14.996
                c8.265-10.052,16.355-20.23,24.266-30.531L2414.304,2200.953z" />
      <path fill="#00AEEF" d="M2341.849,2286.224c-8.513,9.092-17.163,18.054-25.961,26.865l18.36,16.972
                c9.121-9.147,18.071-18.421,26.857-27.822L2341.849,2286.224z" />
      <path fill="#00AEEF" d="M2379.047,2244.527c-8.102,9.531-16.348,18.936-24.748,28.195l19.244,16.006
                c8.705-9.605,17.237-19.339,25.6-29.195L2379.047,2244.527z" />
      <path fill="#00AEEF" d="M1832.029,2603.217c-105.083,31.622-216.431,48.635-331.68,48.635
                c-603.643,0-1100.398-466.33-1148.989-1057.652h-24.582c9.974,125.315,39.686,247.057,88.737,363.028
                c59.299,140.2,144.19,266.11,252.312,374.233c108.124,108.124,234.035,193.012,374.234,252.315
                c145.16,61.396,299.35,92.527,458.288,92.527c116.091,0,229.645-16.63,339.001-49.513L1832.029,2603.217z" />
      <path fill="#00AEEF" d="M1165.698,395.571c105.955-32.198,218.313-49.539,334.652-49.539
                c603.642,0,1100.397,466.329,1148.987,1057.652h24.582c-9.973-125.317-39.686-247.058-88.736-363.029
                c-59.301-140.2-144.192-266.111-252.313-374.234c-108.122-108.123-234.034-193.013-374.234-252.313
                c-145.159-61.397-299.348-92.528-458.285-92.528c-117.145,0-231.704,16.934-341.975,50.41L1165.698,395.571z" />
      <path fill="#00AEEF" d="M1892.773,2609.323l-8.553-23.179c-11.475,4.063-23.037,7.935-34.675,11.641l7.324,23.586
                C1868.891,2617.551,1880.859,2613.54,1892.773,2609.323z" />
      <path fill="#00AEEF" d="M2478.611,2108.471c-6.734,10.768-13.649,21.407-20.723,31.932l21.545,12.817
                c7.303-10.908,14.43-21.931,21.361-33.078L2478.611,2108.471z" />
      <path fill="#00AEEF" d="M2083.276,2493.331c-10.54,6.202-21.186,12.245-31.937,18.116l12.174,21.736
                c11.139-6.066,22.172-12.306,33.096-18.725L2083.276,2493.331z" />
      <path fill="#00AEEF" d="M1985.896,2544.547c-11.051,5.15-22.201,10.124-33.439,14.934l9.774,22.748
                c11.643-4.971,23.195-10.109,34.64-15.433L1985.896,2544.547z" />
      <path fill="#00AEEF" d="M2035.172,2520.115c-10.807,5.683-21.714,11.194-32.719,16.541l10.981,22.268
                c11.406-5.521,22.71-11.211,33.905-17.086L2035.172,2520.115z" />
      <path fill="#00AEEF" d="M2262.018,2363.711c-9.271,8.177-18.665,16.215-28.197,24.092l16.51,18.826
                c9.845-8.156,19.568-16.479,29.17-24.972L2262.018,2363.711z" />
      <path fill="#00AEEF" d="M1935.545,2566.574c-11.272,4.614-22.643,9.033-34.092,13.297l8.556,23.188
                c11.823-4.393,23.596-8.963,35.307-13.748L1935.545,2566.574z" />
      <path fill="#00AEEF" d="M2219.574,2399.375c-9.617,7.7-19.354,15.257-29.221,22.651l15.508,19.671
                c10.2-7.652,20.284-15.473,30.246-23.471L2219.574,2399.375z" />
      <path fill="#00AEEF" d="M2175.574,2432.904c-9.946,7.213-20.006,14.277-30.188,21.176l14.448,20.444
                c10.536-7.137,20.961-14.446,31.264-21.925L2175.574,2432.904z" />
      <path fill="#00AEEF" d="M2130.11,2464.242c-10.255,6.711-20.617,13.271-31.094,19.664l13.335,21.129
                c10.85-6.606,21.589-13.384,32.215-20.341L2130.11,2464.242z" />
    </g>
    <g id="outer-markers">
      <path fill="#00AEEF" d="M2600.148,2439.238l75.949-13.516c201.208-254.912,321.304-576.818,321.304-926.781
                c0-115.553-13.102-228.042-37.882-336.077l-60.659-36.077c31.612,118.866,48.481,243.74,48.481,372.559
                C2947.342,1858.194,2816.589,2186.49,2600.148,2439.238z" />
      <path fill="#00AEEF" d="M580.414,2613.735C259.956,2348.547,55.777,1947.793,55.777,1499.347
                c0-574.105,334.625-1070.053,819.473-1303.448H762.825C309.303,453.146,3.297,940.298,3.297,1498.942
                c0,445.579,194.667,845.69,503.59,1119.93L580.414,2613.735z" />
    </g>
    <polyline fill="#00AEEF" points="2002.903,440.99 1996.871,572.727 2118.385,500.173  " />
    <polyline fill="#00AEEF" points="934.566,2378.094 815.834,2435.484 937.477,2507.826     " />
  </g>
</svg>

注意:此类型的转换在不同的浏览器中通常会有不同的解释,对于其他浏览器而言可能不适用。

以上版本适用于Chrome,但在Firefox中则完全不同。关于这一点,有许多SO问题

Codepen Demo

CSS-Tricks也有一系列文章。特别是Transforms

上的这个
相关问题