html - 使用 CSS 和内部动画 SVG标签是它的轴

Question

我有一个小问题，我确信这只是一个简单的解决方法，但我无法用我通常做的事情来解决它。

我在 Sketch 中创建了一个 SVG 标志，并将其导出，只是想制作一个简单的加载动画，只是旋转圆圈，一个顺时针旋转，一个逆时针旋转。这应该很简单，但是当我到达内圈时，它围绕着不同的轴旋转。我戴上transform-origin: center它，它什么也没做。我做到transform-origin: fill-box了，它在左上角旋转（在它的内轴上），所以仍然不是我想要的。而且我已经关闭了内联转换，但无济于事。HTML 代码在这里：

<div class='loading-screen'>
    <svg width="62px" height="62px" viewBox="0 0 62 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
    <title>Group 11 Copy 9</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group-11-Copy-9">
            <g id="Group-75-Copy" fill="#425563">
                <path d="M30.5749355,61.1497976 C29.8994748,61.1497976 29.3519395,60.6028093 29.3519395,59.9280234 L29.3519395,53.2156572 C29.3519395,52.5408713 29.8994748,51.993883 30.5749355,51.993883 C31.2503961,51.993883 31.7979314,52.5408713 31.7979314,53.2156572 L31.7979314,59.9280234 C31.7979314,60.6028093 31.2503961,61.1497976 30.5749355,61.1497976" id="Fill-1"></path>
                <path d="M38.4886365,60.1022789 C37.8362293,60.2768705 37.1655995,59.8901178 36.9908334,59.2383013 L35.2517331,52.7547123 C35.076967,52.1029569 35.4641064,51.432997 36.1165747,51.2583444 C36.7689819,51.0836918 37.4396118,51.4704444 37.614439,52.1222609 L39.3534781,58.605911 C39.5282442,59.2576664 39.1411049,59.9276263 38.4886365,60.1022789" id="Fill-3"></path>
                <path d="M45.8315103,57.0489187 C45.2466125,57.3862505 44.498567,57.1860628 44.1608979,56.6017493 L40.801328,50.7886089 C40.4635977,50.2042343 40.6640467,49.4570583 41.2490057,49.1196042 C41.8339035,48.7822724 42.5818878,48.9824601 42.9196181,49.5668347 L46.2791269,55.3799751 C46.6169183,55.9642886 46.4164081,56.7115257 45.8315103,57.0489187" id="Fill-5"></path>
                <path d="M52.173949,52.1828792 C51.6963079,52.6600431 50.921968,52.6600431 50.4443881,52.1828792 L45.6932934,47.4365309 C45.2156524,46.959367 45.2156524,46.1858007 45.6932934,45.7086979 C46.1708734,45.231534 46.9452133,45.231534 47.4228543,45.7086979 L52.173949,50.4550462 C52.6515901,50.932149 52.6515901,51.7057153 52.173949,52.1828792" id="Fill-7"></path>
                <path d="M57.0571517,45.8797096 C56.7194825,46.4640231 55.971437,46.6642719 55.3865392,46.3268789 L49.5675856,42.9707264 C48.9826878,42.6332723 48.7822388,41.8860963 49.1199691,41.3017828 C49.4576994,40.7173472 50.2056838,40.5171595 50.7905816,40.8544913 L56.6095352,44.210705 C57.194433,44.5480979 57.3948209,45.295335 57.0571517,45.8797096" id="Fill-9"></path>
                <path d="M60.0897414,38.5201879 C59.9149141,39.1719433 59.2443454,39.558757 58.5918771,39.3841044 L52.1017433,37.6468026 C51.4493361,37.4722111 51.0621356,36.8022512 51.2369629,36.1504347 C51.4117901,35.4986793 52.08242,35.1118656 52.7348272,35.2865182 L59.2248998,37.02382 C59.8773681,37.1984115 60.2645075,37.8683714 60.0897414,38.5201879" id="Fill-11"></path>
                <path d="M61.1496508,30.6054126 C61.1496508,31.2801374 60.6020544,31.8271868 59.9266549,31.8271868 L53.2075151,31.8271868 C52.5321156,31.8271868 51.9845192,31.2801374 51.9845192,30.6054126 C51.9845192,29.9306267 52.5321156,29.3836384 53.2075151,29.3836384 L59.9266549,29.3836384 C60.6020544,29.3836384 61.1496508,29.9306267 61.1496508,30.6054126" id="Fill-13"></path>
                <path d="M-2.4459919e-05,30.6056508 C-2.4459919e-05,29.930865 0.547571977,29.3838767 1.22297149,29.3838767 L7.94211125,29.3838767 C8.61751076,29.3838767 9.1651072,29.930865 9.1651072,30.6056508 C9.1651072,31.2803756 8.61751076,31.827425 7.94211125,31.827425 L1.22297149,31.827425 C0.547571977,31.827425 -2.4459919e-05,31.2803756 -2.4459919e-05,30.6056508" id="Fill-16"></path>
                <path d="M1.04859673,38.5114766 C0.873769457,37.8596601 1.26096998,37.1897002 1.91337717,37.0151087 L8.40344978,35.2778069 C9.05591812,35.1031543 9.72654795,35.489968 9.90131407,36.1417234 C10.0762025,36.79354 9.68900198,37.4634998 9.03659479,37.6380914 L2.54639987,39.3753932 C1.89399268,39.5500458 1.22336285,39.1632321 1.04859673,38.5114766" id="Fill-19"></path>
                <path d="M4.10501649,45.8469538 C3.76728615,45.2626403 3.96767404,44.5154032 4.552633,44.1780103 L10.3715866,40.8217966 C10.9564844,40.4844648 11.7044687,40.6846525 12.0421991,41.2690271 C12.3798682,41.8534017 12.1794804,42.6005777 11.5945825,42.9380317 L5.77562896,46.2941843 C5.19066999,46.6315772 4.44268567,46.4313284 4.10501649,45.8469538" id="Fill-21"></path>
                <path d="M30.574697,0.0610581645 C31.2501577,0.0610581645 31.7976929,0.608046464 31.7976929,1.28283234 L31.7976929,7.99519858 C31.7976929,8.66998446 31.2501577,9.21697276 30.574697,9.21697276 C29.8992363,9.21697276 29.351701,8.66998446 29.351701,7.99519858 L29.351701,1.28283234 C29.351701,0.608046464 29.8992363,0.0610581645 30.574697,0.0610581645" id="Fill-23"></path>
                <path d="M8.97567736,9.02794597 C9.45331843,8.55078206 10.2276583,8.55078206 10.7052382,9.02794597 L15.4563329,13.7742943 C15.933974,14.2514582 15.933974,15.0250245 15.4563329,15.5021273 C14.978753,15.9792912 14.2044131,15.9792912 13.726772,15.5021273 L8.97567736,10.755779 C8.49803629,10.2786762 8.49803629,9.50510987 8.97567736,9.02794597" id="Fill-25"></path>
                <path d="M4.09247466,15.3311767 C4.43014384,14.7468021 5.17818932,14.5465533 5.76308713,14.8839463 L11.5820407,18.2401599 C12.1669385,18.5775529 12.3673876,19.3247899 12.0296572,19.9091034 C11.6919269,20.493478 10.9439426,20.6937268 10.3590448,20.3563339 L4.54009118,17.0001202 C3.95519337,16.6627273 3.75480548,15.9154902 4.09247466,15.3311767" id="Fill-27"></path>
                <path d="M1.05988498,22.6906678 C1.23471225,22.0389124 1.90528093,21.6520987 2.55774927,21.8267513 L9.04788304,23.5640531 C9.70035138,23.7387057 10.0874907,24.4086656 9.91266348,25.060421 C9.7378362,25.7121765 9.06720637,26.0989291 8.41479918,25.9243376 L1.92472657,24.1870358 C1.27225823,24.0123831 0.88511886,23.3424233 1.05988498,22.6906678" id="Fill-29"></path>
                <path d="M60.1010296,22.6993791 C60.2758569,23.3511345 59.8886564,24.0210944 59.2362492,24.195747 L52.7461766,25.9330488 C52.0937082,26.1076403 51.4230784,25.7208877 51.2483123,25.0691323 C51.0734239,24.4173769 51.4606244,23.747417 52.1130316,23.5727644 L58.6032265,21.8354626 C59.2556337,21.66081 59.9262635,22.0476237 60.1010296,22.6993791" id="Fill-31"></path>
                <path d="M57.044616,15.3638714 C57.3823463,15.948246 57.1819584,16.695483 56.5969995,17.0328149 L50.7780459,20.3890286 C50.1931481,20.7264215 49.4452249,20.5261727 49.1074334,19.9417981 C48.7697642,19.3574846 48.9701521,18.6102475 49.5550499,18.2728546 L55.3740035,14.916702 C55.9589625,14.5793091 56.7069468,14.7794968 57.044616,15.3638714" id="Fill-33"></path>
                <path d="M52.1737717,9.02776881 C52.6514127,9.50493272 52.6514127,10.278499 52.1737717,10.7556019 L47.422677,15.5019502 C46.9450359,15.9791141 46.170696,15.9791141 45.6931161,15.5019502 C45.215475,15.0248474 45.215475,14.25122 45.6931161,13.7741171 L50.4442108,9.02776881 C50.9217907,8.55060491 51.6961306,8.55060491 52.1737717,9.02776881" id="Fill-35"></path>
                <path d="M45.8642316,4.14943833 C46.4491906,4.48683127 46.6496396,5.23406836 46.3119093,5.81838186 L42.9523394,11.6315223 C42.614609,12.2158358 41.8666859,12.4160846 41.2817269,12.0786917 C40.6967679,11.7412987 40.4963801,10.9940616 40.8340492,10.4097481 L44.1936191,4.59660768 C44.5313495,4.01229418 45.2793338,3.81204539 45.8642316,4.14943833" id="Fill-37"></path>
                <path d="M38.4973565,1.11987821 C39.1498248,1.29453083 39.5369642,1.9644907 39.3621981,2.61624613 L37.623159,9.09989625 C37.4483317,9.75165168 36.7777019,10.1384654 36.1252947,9.96381277 C35.4728264,9.78922124 35.085687,9.11926137 35.2604531,8.46744485 L36.9995533,1.98379473 C37.1743195,1.3320393 37.8449493,0.945225592 38.4973565,1.11987821" id="Fill-39"></path>
                <path d="M22.6609898,1.1085768 C23.313397,0.933924181 23.9840268,1.32073789 24.158793,1.97249332 L25.8978932,8.45614344 C26.0726593,9.10795996 25.68552,9.77785874 25.0330516,9.95251136 C24.3806444,10.127164 23.7100146,9.74035027 23.5351873,9.08859484 L21.7961482,2.60494472 C21.6213821,1.95318929 22.0085215,1.28322942 22.6609898,1.1085768" id="Fill-49"></path>
                <path d="M15.3181221,4.16193708 C15.9030199,3.82460523 16.6510654,4.02479293 16.9887346,4.60916752 L20.3483045,10.4222469 C20.6860348,11.0065604 20.4856469,11.7537975 19.9006268,12.0911904 C19.315729,12.4285833 18.5677447,12.2283346 18.2300143,11.6440211 L14.8705056,5.8309417 C14.5327141,5.24656711 14.7332243,4.49933002 15.3181221,4.16193708" id="Fill-51"></path>
                <path d="M8.97586081,52.1831236 C8.49821974,51.7059597 8.49821974,50.9323323 8.97586081,50.4552905 L13.7269555,45.7089422 C14.2045965,45.2317783 14.9789364,45.2317783 15.4565164,45.7089422 C15.9341574,46.186045 15.9341574,46.9596113 15.4565164,47.4367753 L10.7054217,52.1831236 C10.2278418,52.6602875 9.45350188,52.6602875 8.97586081,52.1831236" id="Fill-53"></path>
                <path d="M15.2853948,57.0613869 C14.7004358,56.724055 14.4999868,55.9768179 14.8377782,55.3924433 L18.197287,49.5793029 C18.5350173,48.9949894 19.2829405,48.7948017 19.8678994,49.1321335 C20.4528584,49.4695876 20.6532463,50.2167636 20.3155771,50.8010771 L16.9560072,56.6142175 C16.618338,57.1985921 15.8702926,57.3987798 15.2853948,57.0613869" id="Fill-65"></path>
                <path d="M22.652276,60.090947 C21.9998076,59.9163555 21.6126683,59.2463956 21.7874344,58.5946401 L23.5264735,52.1109289 C23.7013008,51.4591735 24.3719306,51.0723598 25.0243378,51.2470735 C25.6768061,51.421665 26.0639455,52.0916249 25.8891794,52.7433803 L24.1500791,59.2270305 C23.975313,59.8787859 23.3046832,60.2655996 22.652276,60.090947" id="Fill-73"></path>
            </g>
            <g id="Group" transform="translate(12.068571, 12.068571)" fill="#FF6900">
                <path d="M18.506364,36.2688224 C17.8309034,36.2688224 17.2833681,35.7218341 17.2833681,35.0470483 L17.2833681,31.3817257 C17.2833681,30.7069399 17.8309034,30.1599516 18.506364,30.1599516 C19.1818247,30.1599516 19.72936,30.7069399 19.72936,31.3817257 L19.72936,35.0470483 C19.72936,35.7218341 19.1818247,36.2688224 18.506364,36.2688224" id="Fill-41"></path>
                <path d="M30.1263727,18.5120575 C30.1263727,17.8372716 30.673908,17.2902833 31.3493686,17.2902833 L35.0183565,17.2902833 C35.6938171,17.2902833 36.2413524,17.8372716 36.2413524,18.5120575 C36.2413524,19.1868434 35.6938171,19.7338317 35.0183565,19.7338317 L31.3493686,19.7338317 C30.673908,19.7338317 30.1263727,19.1868434 30.1263727,18.5120575" id="Fill-43"></path>
                <path d="M28.560785,24.3360045 C28.8984542,23.7516299 29.6464996,23.5513811 30.2313975,23.8888352 L33.4088632,25.7214964 C33.9938222,26.0588283 34.1942101,26.8060654 33.8565409,27.39044 C33.5187494,27.9747535 32.7708262,28.1750022 32.1858673,27.8376093 L29.0084015,26.004948 C28.4235037,25.6676162 28.2230547,24.920318 28.560785,24.3360045" id="Fill-45"></path>
                <path d="M24.3010228,28.6082189 C24.8859818,28.2708871 25.6339661,28.4710748 25.9716964,29.0553883 L27.8061904,32.2296798 C28.1439207,32.8140544 27.9434717,33.5612915 27.3585127,33.8986844 C26.7736149,34.2360773 26.0256306,34.0358285 25.6879002,33.451454 L23.8534063,30.2771625 C23.515676,29.692849 23.716125,28.9456119 24.3010228,28.6082189" id="Fill-47"></path>
                <path d="M18.4956139,0.816643903 C19.1710746,0.816643903 19.7186099,1.3636322 19.7186099,2.03841808 L19.7186099,5.70374061 C19.7186099,6.3784654 19.1710746,6.92551479 18.4956139,6.92551479 C17.8201532,6.92551479 17.272618,6.3784654 17.272618,5.70374061 L17.272618,2.03841808 C17.272618,1.3636322 17.8201532,0.816643903 18.4956139,0.816643903" id="Fill-55"></path>
                <path d="M8.44118686,12.7494618 C8.10351768,13.3338364 7.35547221,13.5340852 6.77057439,13.1966923 L3.59310861,11.364031 C3.00814965,11.0266381 2.80776176,10.279401 3.14543094,9.69502639 C3.48316127,9.11071289 4.2311456,8.9104641 4.81610456,9.24785704 L7.99357034,11.0805183 C8.57846816,11.4179112 8.77885604,12.1651483 8.44118686,12.7494618" id="Fill-57"></path>
                <path d="M12.700894,8.47724741 C12.1159962,8.81464035 11.3680119,8.61439156 11.0302815,8.03001697 L9.19578759,4.85578657 C8.85805726,4.27141198 9.0585063,3.5241749 9.64340411,3.18678196 C10.2283631,2.84945011 10.9763474,3.04963781 11.3140777,3.63401239 L13.1485717,6.8082428 C13.486302,7.39261738 13.285853,8.13985447 12.700894,8.47724741" id="Fill-59"></path>
                <path d="M24.2842983,8.48953846 L24.2842372,8.48953846 C23.6993394,8.15214552 23.4988903,7.40496952 23.8366207,6.82059493 L25.6711146,3.64630344 C26.0088449,3.06192885 26.7568293,2.86174115 27.3417271,3.199073 L27.3417882,3.199073 C27.926686,3.53646594 28.1271351,4.28370303 27.7894047,4.86807762 L25.9549108,8.04236911 C25.6171805,8.6267437 24.8691962,8.8269314 24.2842983,8.48953846" id="Fill-61"></path>
                <path d="M28.560785,12.7450207 C28.2230547,12.1606461 28.4235037,11.413409 29.0084015,11.0760772 L32.1858673,9.2433548 C32.7708262,8.90602295 33.5187494,9.10621065 33.8565409,9.69058524 C34.1942101,10.2749598 33.9938222,11.0221358 33.4088632,11.3595288 L30.2313975,13.19219 C29.6464996,13.529583 28.8984542,13.3293953 28.560785,12.7450207" id="Fill-63"></path>
                <path d="M0.772922751,18.5515452 C0.772922751,17.8768204 1.32045804,17.329771 1.9959187,17.329771 L5.66490656,17.329771 C6.34036722,17.329771 6.88790251,17.8768204 6.88790251,18.5515452 C6.88790251,19.2263311 6.34036722,19.7733194 5.66490656,19.7733194 L1.9959187,19.7733194 C1.32045804,19.7733194 0.772922751,19.2263311 0.772922751,18.5515452" id="Fill-67"></path>
                <path d="M12.7176735,28.5959279 C13.3026325,28.9332597 13.5030815,29.6805579 13.16529,30.2648714 L11.3307961,33.4391629 C10.9931269,34.0235375 10.2451426,34.2237252 9.66018362,33.8863933 C9.0752858,33.5490004 8.87483677,32.8017633 9.2125671,32.2173887 L11.047061,29.0430972 C11.3847302,28.4587837 12.1327757,28.258596 12.7176735,28.5959279" id="Fill-69"></path>
                <path d="M8.44118686,24.3404762 C8.77885604,24.9247897 8.57846816,25.6720268 7.99357034,26.0094197 L4.81610456,27.842081 C4.2311456,28.1794739 3.48316127,27.9792252 3.14543094,27.3949117 C2.80776176,26.8105371 3.00814965,26.0633 3.59310861,25.725907 L6.77057439,23.8932458 C7.35547221,23.5558528 8.10351768,23.7561016 8.44118686,24.3404762" id="Fill-71"></path>
            </g>
        </g>
    </g>
</svg>
</div>

SCSS 代码在这里：

* {
  margin: 0;
  padding: 0;
}

.loading-screen {
  height: 100vh;
  width: 100vw;
  background-color: #f3f4f5;
  position: fixed;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  g#Group-75-Copy {
    transform-origin: center;
    animation: backwards-spin 3s infinite linear;
  }
  g#Group {
    transform-origin: center;
    transform-box: fill-box;
    animation: spin 3s infinite linear;
  }
}

@keyframes spin {

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

}

@keyframes backwards-spin {

  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }

}

这是一个工作代码笔的链接：https ://codepen.io/adammcgurk/pen/oJmLxW

所以 TL;DR 的问题是：
我怎样才能让橙色圆圈位于中间而不是 SVG 的左上角？

标签： htmlcsssvgcss-animations

Answer 1

我会在动画中添加一些翻译来纠正位置：

* {
  margin: 0;
  padding: 0;
}

.loading-screen {
  height: 100vh;
  width: 100vw;
  background-color: #f3f4f5;
  position: fixed;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  width: 62px;
  height: 62px;
}

g#Group-75-Copy {
  transform-origin: center;
  animation: backwards-spin 3s infinite linear;
}

g#Group {
  transform-origin: center;
  transform-box:fill-box;
  animation: spin 3s infinite linear;
}

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

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

<div class='loading-screen'>
  <svg>
    <g id="Page-1" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group-11-Copy-9">
            <g id="Group-75-Copy" fill="#425563">
                <path d="M30.5749355,61.1497976 C29.8994748,61.1497976 29.3519395,60.6028093 29.3519395,59.9280234 L29.3519395,53.2156572 C29.3519395,52.5408713 29.8994748,51.993883 30.5749355,51.993883 C31.2503961,51.993883 31.7979314,52.5408713 31.7979314,53.2156572 L31.7979314,59.9280234 C31.7979314,60.6028093 31.2503961,61.1497976 30.5749355,61.1497976" id="Fill-1"></path>
                <path d="M38.4886365,60.1022789 C37.8362293,60.2768705 37.1655995,59.8901178 36.9908334,59.2383013 L35.2517331,52.7547123 C35.076967,52.1029569 35.4641064,51.432997 36.1165747,51.2583444 C36.7689819,51.0836918 37.4396118,51.4704444 37.614439,52.1222609 L39.3534781,58.605911 C39.5282442,59.2576664 39.1411049,59.9276263 38.4886365,60.1022789" id="Fill-3"></path>
                <path d="M45.8315103,57.0489187 C45.2466125,57.3862505 44.498567,57.1860628 44.1608979,56.6017493 L40.801328,50.7886089 C40.4635977,50.2042343 40.6640467,49.4570583 41.2490057,49.1196042 C41.8339035,48.7822724 42.5818878,48.9824601 42.9196181,49.5668347 L46.2791269,55.3799751 C46.6169183,55.9642886 46.4164081,56.7115257 45.8315103,57.0489187" id="Fill-5"></path>
                <path d="M52.173949,52.1828792 C51.6963079,52.6600431 50.921968,52.6600431 50.4443881,52.1828792 L45.6932934,47.4365309 C45.2156524,46.959367 45.2156524,46.1858007 45.6932934,45.7086979 C46.1708734,45.231534 46.9452133,45.231534 47.4228543,45.7086979 L52.173949,50.4550462 C52.6515901,50.932149 52.6515901,51.7057153 52.173949,52.1828792" id="Fill-7"></path>
                <path d="M57.0571517,45.8797096 C56.7194825,46.4640231 55.971437,46.6642719 55.3865392,46.3268789 L49.5675856,42.9707264 C48.9826878,42.6332723 48.7822388,41.8860963 49.1199691,41.3017828 C49.4576994,40.7173472 50.2056838,40.5171595 50.7905816,40.8544913 L56.6095352,44.210705 C57.194433,44.5480979 57.3948209,45.295335 57.0571517,45.8797096" id="Fill-9"></path>
                <path d="M60.0897414,38.5201879 C59.9149141,39.1719433 59.2443454,39.558757 58.5918771,39.3841044 L52.1017433,37.6468026 C51.4493361,37.4722111 51.0621356,36.8022512 51.2369629,36.1504347 C51.4117901,35.4986793 52.08242,35.1118656 52.7348272,35.2865182 L59.2248998,37.02382 C59.8773681,37.1984115 60.2645075,37.8683714 60.0897414,38.5201879" id="Fill-11"></path>
                <path d="M61.1496508,30.6054126 C61.1496508,31.2801374 60.6020544,31.8271868 59.9266549,31.8271868 L53.2075151,31.8271868 C52.5321156,31.8271868 51.9845192,31.2801374 51.9845192,30.6054126 C51.9845192,29.9306267 52.5321156,29.3836384 53.2075151,29.3836384 L59.9266549,29.3836384 C60.6020544,29.3836384 61.1496508,29.9306267 61.1496508,30.6054126" id="Fill-13"></path>
                <path d="M-2.4459919e-05,30.6056508 C-2.4459919e-05,29.930865 0.547571977,29.3838767 1.22297149,29.3838767 L7.94211125,29.3838767 C8.61751076,29.3838767 9.1651072,29.930865 9.1651072,30.6056508 C9.1651072,31.2803756 8.61751076,31.827425 7.94211125,31.827425 L1.22297149,31.827425 C0.547571977,31.827425 -2.4459919e-05,31.2803756 -2.4459919e-05,30.6056508" id="Fill-16"></path>
                <path d="M1.04859673,38.5114766 C0.873769457,37.8596601 1.26096998,37.1897002 1.91337717,37.0151087 L8.40344978,35.2778069 C9.05591812,35.1031543 9.72654795,35.489968 9.90131407,36.1417234 C10.0762025,36.79354 9.68900198,37.4634998 9.03659479,37.6380914 L2.54639987,39.3753932 C1.89399268,39.5500458 1.22336285,39.1632321 1.04859673,38.5114766" id="Fill-19"></path>
                <path d="M4.10501649,45.8469538 C3.76728615,45.2626403 3.96767404,44.5154032 4.552633,44.1780103 L10.3715866,40.8217966 C10.9564844,40.4844648 11.7044687,40.6846525 12.0421991,41.2690271 C12.3798682,41.8534017 12.1794804,42.6005777 11.5945825,42.9380317 L5.77562896,46.2941843 C5.19066999,46.6315772 4.44268567,46.4313284 4.10501649,45.8469538" id="Fill-21"></path>
                <path d="M30.574697,0.0610581645 C31.2501577,0.0610581645 31.7976929,0.608046464 31.7976929,1.28283234 L31.7976929,7.99519858 C31.7976929,8.66998446 31.2501577,9.21697276 30.574697,9.21697276 C29.8992363,9.21697276 29.351701,8.66998446 29.351701,7.99519858 L29.351701,1.28283234 C29.351701,0.608046464 29.8992363,0.0610581645 30.574697,0.0610581645" id="Fill-23"></path>
                <path d="M8.97567736,9.02794597 C9.45331843,8.55078206 10.2276583,8.55078206 10.7052382,9.02794597 L15.4563329,13.7742943 C15.933974,14.2514582 15.933974,15.0250245 15.4563329,15.5021273 C14.978753,15.9792912 14.2044131,15.9792912 13.726772,15.5021273 L8.97567736,10.755779 C8.49803629,10.2786762 8.49803629,9.50510987 8.97567736,9.02794597" id="Fill-25"></path>
                <path d="M4.09247466,15.3311767 C4.43014384,14.7468021 5.17818932,14.5465533 5.76308713,14.8839463 L11.5820407,18.2401599 C12.1669385,18.5775529 12.3673876,19.3247899 12.0296572,19.9091034 C11.6919269,20.493478 10.9439426,20.6937268 10.3590448,20.3563339 L4.54009118,17.0001202 C3.95519337,16.6627273 3.75480548,15.9154902 4.09247466,15.3311767" id="Fill-27"></path>
                <path d="M1.05988498,22.6906678 C1.23471225,22.0389124 1.90528093,21.6520987 2.55774927,21.8267513 L9.04788304,23.5640531 C9.70035138,23.7387057 10.0874907,24.4086656 9.91266348,25.060421 C9.7378362,25.7121765 9.06720637,26.0989291 8.41479918,25.9243376 L1.92472657,24.1870358 C1.27225823,24.0123831 0.88511886,23.3424233 1.05988498,22.6906678" id="Fill-29"></path>
                <path d="M60.1010296,22.6993791 C60.2758569,23.3511345 59.8886564,24.0210944 59.2362492,24.195747 L52.7461766,25.9330488 C52.0937082,26.1076403 51.4230784,25.7208877 51.2483123,25.0691323 C51.0734239,24.4173769 51.4606244,23.747417 52.1130316,23.5727644 L58.6032265,21.8354626 C59.2556337,21.66081 59.9262635,22.0476237 60.1010296,22.6993791" id="Fill-31"></path>
                <path d="M57.044616,15.3638714 C57.3823463,15.948246 57.1819584,16.695483 56.5969995,17.0328149 L50.7780459,20.3890286 C50.1931481,20.7264215 49.4452249,20.5261727 49.1074334,19.9417981 C48.7697642,19.3574846 48.9701521,18.6102475 49.5550499,18.2728546 L55.3740035,14.916702 C55.9589625,14.5793091 56.7069468,14.7794968 57.044616,15.3638714" id="Fill-33"></path>
                <path d="M52.1737717,9.02776881 C52.6514127,9.50493272 52.6514127,10.278499 52.1737717,10.7556019 L47.422677,15.5019502 C46.9450359,15.9791141 46.170696,15.9791141 45.6931161,15.5019502 C45.215475,15.0248474 45.215475,14.25122 45.6931161,13.7741171 L50.4442108,9.02776881 C50.9217907,8.55060491 51.6961306,8.55060491 52.1737717,9.02776881" id="Fill-35"></path>
                <path d="M45.8642316,4.14943833 C46.4491906,4.48683127 46.6496396,5.23406836 46.3119093,5.81838186 L42.9523394,11.6315223 C42.614609,12.2158358 41.8666859,12.4160846 41.2817269,12.0786917 C40.6967679,11.7412987 40.4963801,10.9940616 40.8340492,10.4097481 L44.1936191,4.59660768 C44.5313495,4.01229418 45.2793338,3.81204539 45.8642316,4.14943833" id="Fill-37"></path>
                <path d="M38.4973565,1.11987821 C39.1498248,1.29453083 39.5369642,1.9644907 39.3621981,2.61624613 L37.623159,9.09989625 C37.4483317,9.75165168 36.7777019,10.1384654 36.1252947,9.96381277 C35.4728264,9.78922124 35.085687,9.11926137 35.2604531,8.46744485 L36.9995533,1.98379473 C37.1743195,1.3320393 37.8449493,0.945225592 38.4973565,1.11987821" id="Fill-39"></path>
                <path d="M22.6609898,1.1085768 C23.313397,0.933924181 23.9840268,1.32073789 24.158793,1.97249332 L25.8978932,8.45614344 C26.0726593,9.10795996 25.68552,9.77785874 25.0330516,9.95251136 C24.3806444,10.127164 23.7100146,9.74035027 23.5351873,9.08859484 L21.7961482,2.60494472 C21.6213821,1.95318929 22.0085215,1.28322942 22.6609898,1.1085768" id="Fill-49"></path>
                <path d="M15.3181221,4.16193708 C15.9030199,3.82460523 16.6510654,4.02479293 16.9887346,4.60916752 L20.3483045,10.4222469 C20.6860348,11.0065604 20.4856469,11.7537975 19.9006268,12.0911904 C19.315729,12.4285833 18.5677447,12.2283346 18.2300143,11.6440211 L14.8705056,5.8309417 C14.5327141,5.24656711 14.7332243,4.49933002 15.3181221,4.16193708" id="Fill-51"></path>
                <path d="M8.97586081,52.1831236 C8.49821974,51.7059597 8.49821974,50.9323323 8.97586081,50.4552905 L13.7269555,45.7089422 C14.2045965,45.2317783 14.9789364,45.2317783 15.4565164,45.7089422 C15.9341574,46.186045 15.9341574,46.9596113 15.4565164,47.4367753 L10.7054217,52.1831236 C10.2278418,52.6602875 9.45350188,52.6602875 8.97586081,52.1831236" id="Fill-53"></path>
                <path d="M15.2853948,57.0613869 C14.7004358,56.724055 14.4999868,55.9768179 14.8377782,55.3924433 L18.197287,49.5793029 C18.5350173,48.9949894 19.2829405,48.7948017 19.8678994,49.1321335 C20.4528584,49.4695876 20.6532463,50.2167636 20.3155771,50.8010771 L16.9560072,56.6142175 C16.618338,57.1985921 15.8702926,57.3987798 15.2853948,57.0613869" id="Fill-65"></path>
                <path d="M22.652276,60.090947 C21.9998076,59.9163555 21.6126683,59.2463956 21.7874344,58.5946401 L23.5264735,52.1109289 C23.7013008,51.4591735 24.3719306,51.0723598 25.0243378,51.2470735 C25.6768061,51.421665 26.0639455,52.0916249 25.8891794,52.7433803 L24.1500791,59.2270305 C23.975313,59.8787859 23.3046832,60.2655996 22.652276,60.090947" id="Fill-73"></path>
            </g>
            <g id="Group" fill="#FF6900">
                <path d="M18.506364,36.2688224 C17.8309034,36.2688224 17.2833681,35.7218341 17.2833681,35.0470483 L17.2833681,31.3817257 C17.2833681,30.7069399 17.8309034,30.1599516 18.506364,30.1599516 C19.1818247,30.1599516 19.72936,30.7069399 19.72936,31.3817257 L19.72936,35.0470483 C19.72936,35.7218341 19.1818247,36.2688224 18.506364,36.2688224" id="Fill-41"></path>
                <path d="M30.1263727,18.5120575 C30.1263727,17.8372716 30.673908,17.2902833 31.3493686,17.2902833 L35.0183565,17.2902833 C35.6938171,17.2902833 36.2413524,17.8372716 36.2413524,18.5120575 C36.2413524,19.1868434 35.6938171,19.7338317 35.0183565,19.7338317 L31.3493686,19.7338317 C30.673908,19.7338317 30.1263727,19.1868434 30.1263727,18.5120575" id="Fill-43"></path>
                <path d="M28.560785,24.3360045 C28.8984542,23.7516299 29.6464996,23.5513811 30.2313975,23.8888352 L33.4088632,25.7214964 C33.9938222,26.0588283 34.1942101,26.8060654 33.8565409,27.39044 C33.5187494,27.9747535 32.7708262,28.1750022 32.1858673,27.8376093 L29.0084015,26.004948 C28.4235037,25.6676162 28.2230547,24.920318 28.560785,24.3360045" id="Fill-45"></path>
                <path d="M24.3010228,28.6082189 C24.8859818,28.2708871 25.6339661,28.4710748 25.9716964,29.0553883 L27.8061904,32.2296798 C28.1439207,32.8140544 27.9434717,33.5612915 27.3585127,33.8986844 C26.7736149,34.2360773 26.0256306,34.0358285 25.6879002,33.451454 L23.8534063,30.2771625 C23.515676,29.692849 23.716125,28.9456119 24.3010228,28.6082189" id="Fill-47"></path>
                <path d="M18.4956139,0.816643903 C19.1710746,0.816643903 19.7186099,1.3636322 19.7186099,2.03841808 L19.7186099,5.70374061 C19.7186099,6.3784654 19.1710746,6.92551479 18.4956139,6.92551479 C17.8201532,6.92551479 17.272618,6.3784654 17.272618,5.70374061 L17.272618,2.03841808 C17.272618,1.3636322 17.8201532,0.816643903 18.4956139,0.816643903" id="Fill-55"></path>
                <path d="M8.44118686,12.7494618 C8.10351768,13.3338364 7.35547221,13.5340852 6.77057439,13.1966923 L3.59310861,11.364031 C3.00814965,11.0266381 2.80776176,10.279401 3.14543094,9.69502639 C3.48316127,9.11071289 4.2311456,8.9104641 4.81610456,9.24785704 L7.99357034,11.0805183 C8.57846816,11.4179112 8.77885604,12.1651483 8.44118686,12.7494618" id="Fill-57"></path>
                <path d="M12.700894,8.47724741 C12.1159962,8.81464035 11.3680119,8.61439156 11.0302815,8.03001697 L9.19578759,4.85578657 C8.85805726,4.27141198 9.0585063,3.5241749 9.64340411,3.18678196 C10.2283631,2.84945011 10.9763474,3.04963781 11.3140777,3.63401239 L13.1485717,6.8082428 C13.486302,7.39261738 13.285853,8.13985447 12.700894,8.47724741" id="Fill-59"></path>
                <path d="M24.2842983,8.48953846 L24.2842372,8.48953846 C23.6993394,8.15214552 23.4988903,7.40496952 23.8366207,6.82059493 L25.6711146,3.64630344 C26.0088449,3.06192885 26.7568293,2.86174115 27.3417271,3.199073 L27.3417882,3.199073 C27.926686,3.53646594 28.1271351,4.28370303 27.7894047,4.86807762 L25.9549108,8.04236911 C25.6171805,8.6267437 24.8691962,8.8269314 24.2842983,8.48953846" id="Fill-61"></path>
                <path d="M28.560785,12.7450207 C28.2230547,12.1606461 28.4235037,11.413409 29.0084015,11.0760772 L32.1858673,9.2433548 C32.7708262,8.90602295 33.5187494,9.10621065 33.8565409,9.69058524 C34.1942101,10.2749598 33.9938222,11.0221358 33.4088632,11.3595288 L30.2313975,13.19219 C29.6464996,13.529583 28.8984542,13.3293953 28.560785,12.7450207" id="Fill-63"></path>
                <path d="M0.772922751,18.5515452 C0.772922751,17.8768204 1.32045804,17.329771 1.9959187,17.329771 L5.66490656,17.329771 C6.34036722,17.329771 6.88790251,17.8768204 6.88790251,18.5515452 C6.88790251,19.2263311 6.34036722,19.7733194 5.66490656,19.7733194 L1.9959187,19.7733194 C1.32045804,19.7733194 0.772922751,19.2263311 0.772922751,18.5515452" id="Fill-67"></path>
                <path d="M12.7176735,28.5959279 C13.3026325,28.9332597 13.5030815,29.6805579 13.16529,30.2648714 L11.3307961,33.4391629 C10.9931269,34.0235375 10.2451426,34.2237252 9.66018362,33.8863933 C9.0752858,33.5490004 8.87483677,32.8017633 9.2125671,32.2173887 L11.047061,29.0430972 C11.3847302,28.4587837 12.1327757,28.258596 12.7176735,28.5959279" id="Fill-69"></path>
                <path d="M8.44118686,24.3404762 C8.77885604,24.9247897 8.57846816,25.6720268 7.99357034,26.0094197 L4.81610456,27.842081 C4.2311456,28.1794739 3.48316127,27.9792252 3.14543094,27.3949117 C2.80776176,26.8105371 3.00814965,26.0633 3.59310861,25.725907 L6.77057439,23.8932458 C7.35547221,23.5558528 8.10351768,23.7561016 8.44118686,24.3404762" id="Fill-71"></path>
            </g>
        </g>
    </g>
</svg>
</div>