js实现svg变色动画效果代码

代码语言:html

所属分类:布局界面

代码描述:js实现svg变色动画效果代码

代码标签: 变色 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        *, *::before, *::after {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --color-fg: #0b0b0e;
          --color-fg-weaker: #696986;
          --color-fg-weakest: #8d8da5;
          --color-bg-weakest: #d7d7e0;
          --color-bg-weaker: #e0e0e6;
          --color-bg: #ebebef;
          --color-bg-stronger: #f6f6f8;
          --color-bg-strongest: white;
          --color-highlight: #8d8da5;
          --color-shadow: #0b0b0e;
          --color-accent-base: #00aaff;
          --color-accent-gradient-start: #00dfff;
          --color-accent-gradient-end: #0075ff;
          --color-accent-highlight: #33e6ff;
          --color-accent-shadow: #005ecc;
        }
        
        [data-theme=dark] {
          --color-fg: white;
          --color-fg-weaker: #8888a1;
          --color-fg-weakest: #656581;
          --color-bg-weakest: #2b2b36;
          --color-bg-weaker: #24242e;
          --color-bg: #1b1b22;
          --color-bg-stronger: #121217;
          --color-bg-strongest: #0b0b0e;
          --color-highlight: white;
          --color-shadow: #656581;
        }
        
        [data-accent-flavour=alt-a] {
          --color-accent-base: #14b84b;
          --color-accent-gradient-start: #14b829;
          --color-accent-gradient-end: #14b86d;
          --color-accent-highlight: #1ae633;
          --color-accent-shadow: #0f8a52;
        }
        
        [data-accent-flavour=alt-b] {
          --color-accent-base: #9159ff;
          --color-accent-gradient-start: #6e59ff;
          --color-accent-gradient-end: #b359ff;
          --color-accent-highlight: #ca8cff;
          --color-accent-shadow: #4126ff;
        }
        
        body {
          min-height: 100vh;
          min-width: 375px;
          padding: 18px;
          color: var(--color-fg);
          background: var(--color-bg);
          font-family: "Barlow", sans-serif;
          font-size: 14px;
        }
        
        svg.defs, svg[data-prep=true] {
          position: absolute;
          height: 0;
          width: 0;
        }
        
        .segmented-control {
          display: flex;
          width: 144px;
          height: 27px;
          grid-area: footer;
          align-self: end;
          justify-self: center;
          border-radius: 5px;
          background: var(--color-bg-stronger);
          z-index: 1;
          transition: all 0.1s ease-in-out;
        }
        .segmented-control input {
          position: absolute;
          transform: scale(0);
        }
        .segmented-control input:checked + label {
          color: inherit;
        }
        .segmented-control input:checked + label ~ label:last-child::before {
          transform: translate(-100%);
        }
        .segmented-control label {
          flex: 1 0 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          padding-bottom: 2px;
          color: var(--color-fg-weaker);
          transition: all 0.1s ease-in-out;
          cursor: pointer;
        }
        .segmented-control label:hover {
          color: inherit;
        }
        .segmented-control label:last-child::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-clip: padding-box;
          background-color: var(--color-bg-weaker);
          border-radius: 5px;
          border: 2px solid transparent;
          z-index: -1;
          transition: transform 0.25s ease-in-out, background-color 0.1s ease-in-out;
        }
        
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 0.1s ease-in-out;
        }
        
        svg {
          height: 100vmin;
          width: 100vmin;
          transition: all 0.1s ease-in-out;
          color: var(--color-highlight);
          fill: var(--color-shadow);
          stroke: var(--color-bg-strongest);
        }
        svg.accent {
          color: var(--color-accent-highlight);
          fill: var(--color-accent-shadow);
          stroke: var(--color-bg-strongest);
        }
    </style>


</head>

<body>
    <!-- logos --><svg class="defs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 374 46"><defs><symbol id="framework" data-name="framework" viewBox="0 0 374 46"><g><rect x="232.53" y="0.89" width="10" height="44.13" rx="1.03"/><rect x="139.53" y="0.89" width="10" height="44.13" rx="1.03"/><path d="M251.53,33.3v-.77a1,1,0,0,1,1-1h7.5a1,1,0,0,1,1,1v.17c0,2.84,3.45,5.34,8.37,5.34,4.74,0,7.75-2.15,7.75-5,0-3.62-5.08-4.22-10.69-6.12-6.89-2.07-14.65-4.82-14.65-13.27,0-8.19,7.07-13.19,17.24-13.19,10.6,0,17.5,5.43,17.5,13.1a1,1,0,0,1-1,1h-7.24a1,1,0,0,1-1-1c0-2.84-3-5.26-8.19-5.26-4.48,0-7.58,1.64-7.58,4.74,0,3.54,4.74,4.4,10.6,6,7.15,2.07,15.08,4.74,15.08,13.36,0,8.27-7.07,13.1-17.67,13.1C258.51,45.54,251.53,40.28,251.53,33.3Z"/><path d="M212.53,2A22.87,22.87,0,0,0,196,2a18.54,18.54,0,0,0-5,2.93A18.7,18.7,0,0,0,186,2a22.87,22.87,0,0,0-16.5,0c-5.93,2.33-10,7.26-10,13.6V44a1,1,0,0,0,1,1h7.93a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3S186,11.7,186,15.6V44a1,1,0,0,0,1,1H195a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3s8.25,3.4,8.25,7.3V44a1,1,0,0,0,1,1h7.93a1,1,0,0,0,1-1V15.6C222.53,9.26,218.45,4.33,212.53,2Z"/><rect x="73" y="0.89" width="10" height="44.13" rx="1.03"/><path d="M53,2A22.87,22.87,0,0,0,36.5,2a18.54,18.54,0,0,0-5,2.93A18.54,18.54,0,0,0,26.5,2,22.87,22.87,0,0,0,10,2C4.07,4.33,0,9.26,0,15.6V44a1,1,0,0,0,1,1H9a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3s8.25,3.4,8.25,7.3V44a1,1,0,0,0,1,1h7.94a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3S53,11.7,53,15.6V44a1,1,0,0,0,1,1H62a1,1,0,0,0,1-1V15.6C63,9.26,58.93,4.33,53,2Z"/><path d="M119.5,2A22.87,22.87,0,0,0,103,2C97.07,4.33,93,9.26,93,15.6V44a1,1,0,0,0,1,1H102a1,1,0,0,0,1-1V15.6c0-3.9,3.69-7.3,8.25-7.3s8.25,3.4,8.25,7.3V44a1,1,0,0,0,1,1h7.94a1,1,0,0,0,1-1V15.6C129.5,9.26,125.43,4.33,119.5,2Z"/></g><g style="fill: currentcolor"><rect x="362.71" y="0.89" width="10" height="44.13" rx="1.03" /><path d="M326.21,43.92a22.87,22.87,0,0,0,16.5,0c5.93-2.34,10-8.1,10-13.6V1.92a1,1,0,0,0-1-1h-7.93a1,1,0,0,0-1,1v28.4c0,3.47-3.69,7.29-8.25,7.29s-8.25-3.82-8.25-7.29V1.92a1,1,0,0,0-1-1h-7.93a1,1,0,0,0-1,1v28.4C316.21,35.82,320.28,41.58,326.21,43.92Z" /></g></symbol></defs></svg>
    <!-- nouns/nav --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96" data-prep="true"><defs><symbol id="settings" viewBox="0 0 96 96"><path d="M80.18,34.66a1.85,1.85,0,0,0-.82-1.54l-.12-.06a1.63,1.63,0,0,0-1.12,0l-3.44.92a1.45,1.45,0,0,1-1.86-.82,3.87,3.87,0,0,1,.16-3l.22-.6h0l1.54-4c.58-1.54.48-3-.3-3.58a18.63,18.63,0,0,0-1.6-1.08,11.71,11.71,0,0,0-1.76-.82c-.9-.36-2.2.26-3.2,1.54L54,13.64l-2.68,3.3,7.48,4.32.1.06-.12,0a2,2,0,0,0-1.56.2,35.91,35.91,0,0,0-4.72,2.74l-13.86-8A6.51,6.51,0,0,0,36.22,20l-.92,4.48a6.3,6.3,0,0,1-2.72,4,2.26,2.26,0,0,1-1.4.36l13.86,8L42,36.6c-1-.08-2.34.78-3.26,2.22l-13.84-8c-.58.92-1.16,1.86-1.72,2.82s-1.1,2-1.62,3c-.74,1.48-.86,3-.26,3.86L23,43a3.19,3.19,0,0,1,.16,2.76,6.48,6.48,0,0,1-1.86,3l13.86,8-3.44,3-13.86-8a6.42,6.42,0,0,0-2.08,4.1c-.06.92-.1,1.86-.1,2.76s0,1.84.12,2.7a1.85,1.85,0,0,0,.82,1.54l6.16,3.54v0l-1.56,4c-.6,1.54-.48,3,.32,3.58a14.39,14.39,0,0,0,1.56,1.08l13.86,8a12.92,12.92,0,0,0,1.78.82,1.74,1.74,0,0,0,.56.1A3.75,3.75,0,0,0,42,82.36l2.68-3.3,6,3.46.18.1,0,0a1.75,1.75,0,0,0,1.76-.08c.76-.34,1.56-.78,2.34-1.22s1.62-1,2.4-1.52A6.37,6.37,0,0,0,59.78,76l.92-4.5a6.37,6.37,0,0,1,2.72-4,2.26,2.26,0,0,1,1.4-.36l3.08.28c1,.08,2.34-.8,3.24-2.22.58-.92,1.16-1.88,1.72-2.84s1.12-2,1.62-3c.74-1.48.86-3,.26-3.84L73,53a3.18,3.18,0,0,1-.16-2.76,6.59,6.59,0,0,1,1.86-3l3.44-3a6.32,6.32,0,0,0,2.08-4.08c.06-.92.1-1.86.1-2.76S80.26,35.54,80.18,34.66Z" style="stroke: none" data-element="darker"/><g style="fill: currentcolor;stroke: none;" data-element="lighter"><path d="M47,56.58c0,5.08,3.56,7.12,7.94,4.6a14,14,0,0,0,3.52-3L47.8,52A14.24,14.24,0,0,0,47,56.58Z"/><polygon points="17.88 51.78 31.74 59.78 35.18 56.76 21.32 48.76 17.88 51.78"/><path d="M28.1,28.6c-1-.08-2.34.78-3.24,2.22l13.84,8c.92-1.44,2.22-2.3,3.26-2.22l3.08.26-13.86-8Z"/><path d="M60.7,25.84c.34,1.24,1.44,1.6,2.72.86a5.1,5.1,0,0,0,1.4-1.26l-5-2.88Z"/><path d="M51.36,16.94,45.2,13.38a1.9,1.9,0,0,0-1.78.1,34.85,34.85,0,0,0-4.74,2.74l13.86,8a35.91,35.91,0,0,1,4.72-2.74,2,2,0,0,1,1.56-.2l.12,0-.1-.06Z"/><path d="M59,12.92a11.71,11.71,0,0,0-1.76-.82c-.9-.36-2.2.26-3.2,1.54l13.86,8c1-1.28,2.3-1.9,3.2-1.54a11.71,11.71,0,0,1,1.76.82Z"/><path d="M73.22,29.56h0l-.22.6a3.87,3.87,0,0,0-.16,3,1.45,1.45,0,0,0,1.86.82L78.12,33a1.63,1.63,0,0,1,1.12,0Z"/><path d="M30.5,70.88a1.53,1.53,0,0,0,1.24.1l5.14,2.86L35.1,78.42l-13.86-8,1.56-4,7.58,4.36Z" style="opacity: 0.67"/><path d="M17.88,51.78l13.86,8a6.42,6.42,0,0,0-2.08,4.1l-13.86-8A6.42,6.42,0,0,1,17.88,51.78Z" style="opacity: 0.67"/><path d="M23,43l13.86,8A3.26,3.26,0,0,1,37,53.76a6.48,6.48,0,0,1-1.86,3l-13.86-8a6.48,6.48,0,0,0,1.86-3A3.19,3.19,0,0,0,23,43Z" style="opacity: 0.67"/><path d="M24.86,30.82l13.84,8c-.58.92-1.14,1.86-1.72,2.82s-1.1,2-1.6,3l-13.86-8c.52-1,1-2,1.62-3S24.28,31.74,24.86,30.82Z" style="opacity: 0.67"/><path d="M32.58,28.5a6.3,6.3,0,0,0,2.72-4l13.86,8a6.3,6.3,0,0,1-2.72,4,2.26,2.26,0,0,1-1.4.36l-13.86-8A2.26,2.26,0,0,0,32.58,28.5Z" style="opacity: 0.67"/><path d="M38.68,16.22l13.86,8A6.51,6.51,0,0,0,50.08,28L36.22,20A6.51,6.51,0,0,1,38.68,16.22Z" style="opacity: 0.67"/><path d="M67.9,21.64l-3.08,3.8-5-2.88,0-.14a1.6,1.6,0,0,0-.74-1l-.1-.06-.1-.06-7.48-4.32L54,13.64Z" style="opacity: 0.67"/><path d="M51.52,45.68,62.1,51.8a19.1,19.1,0,0,1-3.66,6.4L47.8,52A19.22,19.22,0,0,1,51.52,45.68Z" style="opacity: 0.67"/><path d="M62.88,47.42a13.78,13.78,0,0,1-.78,4.38L51.52,45.68a13.35,13.35,0,0,1,3.4-2.86C59.32,40.3,62.88,42.34,62.88,47.42Z" style="opacity: 0.33"/><path d="M35.12,48.48c-.6-.84-.48-2.38.26-3.86l-13.86-8c-.74,1.48-.86,3-.26,3.86L23,43l13.86,8Z" style="opacity: 0.33"/><polygon points="50.08 28.04 49.16 32.52 35.3 24.52 36.22 20.04 50.08 28.04" style="opacity: 0.33"/><path d="M50.62,82.52l-6-3.46.4-.5a5.1,5.1,0,0,1,1.4-1.26c1.28-.72,2.4-.38,2.72.84l.92,3.44a1.7,1.7,0,0,0,.56.9l.18.12,0,0Z" style="opacity: 0.33"/><path d="M21.24,70.42l13.86,8c-.6,1.54-.48,3,.32,3.58A14.39,14.39,0,0,0,37,83.08l-13.86-8A14.39,14.39,0,0,1,21.56,74C20.76,73.4,20.64,72,21.24,70.42Z" style="opacity: 0.33"/><path d="M35.18,70.06a1.45,1.45,0,0,1,1.86.82,4,4,0,0,1-.16,3L31.74,71Z" style="opacity: 0.33"/><path d="M30.38,70.8a1.84,1.84,0,0,1-.7-1.46q-.12-1.29-.12-2.7c0-.9,0-1.84.1-2.76l-13.86-8c-.06.92-.1,1.86-.1,2.76s0,1.84.12,2.7a1.85,1.85,0,0,0,.82,1.54l6.16,3.54v0Z" style="opacity: 0.33"/></g><path d="M39.32,86a3.92,3.92,0,0,1-1.2-.2,15.43,15.43,0,0,1-2.11-1l-13.89-8a16.47,16.47,0,0,1-1.8-1.24c-1.5-1.13-1.89-3.44-.94-5.87l.94-2.4-4.67-2.68a3.82,3.82,0,0,1-1.82-3.12c-.09-.89-.13-1.86-.13-2.86s0-1.93.11-2.89a8.39,8.39,0,0,1,2.74-5.46l3.45-3a4.47,4.47,0,0,0,1.26-2,2.11,2.11,0,0,0,.12-1.07l-1.76-2.51c-1-1.44-1-3.71.11-5.9.55-1.06,1.09-2.09,1.69-3.11s1.16-1.92,1.75-2.86c1.3-2.09,3.26-3.3,5.08-3.15l3.1.26a.49.49,0,0,0,.22-.09,4.38,4.38,0,0,0,1.77-2.65l.92-4.49a8.53,8.53,0,0,1,3.28-5.06,36.22,36.22,0,0,1,5-2.9,3.84,3.84,0,0,1,3.59-.06l4.74,2.74,1.59-2c1.57-2,3.74-2.84,5.5-2.13a12.9,12.9,0,0,1,2,.94l13.87,8a20.34,20.34,0,0,1,1.81,1.22c1.52,1.17,1.89,3.42,1,5.88l-.93,2.4,4.55,2.64a3.84,3.84,0,0,1,1.92,3.17c.09.92.13,1.88.13,2.86s0,1.93-.1,2.89a8.33,8.33,0,0,1-2.76,5.45l-3.44,3a4.54,4.54,0,0,0-1.26,2.06,2,2,0,0,0-.12,1.06l1.76,2.54c1,1.4,1,3.66-.11,5.87-.52,1-1.08,2.06-1.68,3.1s-1.17,2-1.76,2.9c-1.32,2.08-3.26,3.3-5.08,3.14l-3.11-.28h0a.94.94,0,0,0-.21.1,4.43,4.43,0,0,0-1.77,2.67l-.92,4.48a8.41,8.41,0,0,1-3.3,5.06c-.8.55-1.64,1.08-2.51,1.59s-1.72,1-2.53,1.32a3.73,3.73,0,0,1-3.22.17,2.07,2.07,0,0,1-.34-.15l-.18-.1-4.54-2.62-1.61,2A5.56,5.56,0,0,1,39.32,86Z" style="stroke-width: 4px;fill: none" data-element="outline"/></symbol><symbol id="person" viewBox="0 0 96 96"><path d="M76,55.57a8.42,8.42,0,0,0-.46-2.9c-.93-1.86-3.32-3-6-3.83a66.37,66.37,0,0,0-7.08-1.54,3,3,0,0,1-.83-.33,35.43,35.43,0,0,0,1.87-8.23c.24-1.73.5-5.92.5-7.08v-3.2c0-3.16,0-6.46-1.87-8.75a1.53,1.53,0,0,1-.48,1.84,5.35,5.35,0,0,0-1.8,4.19,80.38,80.38,0,0,1-1.08,17.12C56.84,52,56.64,53.34,54.46,54a10.29,10.29,0,0,1-5.81-.51,25.89,25.89,0,0,1-6.17-3.29,28.81,28.81,0,0,1-5.4-4.91,5.73,5.73,0,0,1,1.24,3.17c0,2.09-1.5,4.32-3.8,6.35-2.91,2.94-6.28,5.64-9.42,8.36-4.16,3.61-5,5.5-5.1,10.59v4.12c0,2.06.46,2.87,2.26,3.64A22.69,22.69,0,0,0,34,84c1,0,2.1-.14,3.18-.28A59.26,59.26,0,0,0,57.1,77c6.75-3.72,11.5-6.83,16-11C74.67,64.42,76,63.43,76,61.37Z" style="stroke: none" data-element="darker"/><g style="fill: currentcolor;stroke: none;" data-element="lighter"><path d="M61.65,21.55a5.35,5.35,0,0,0-1.8,4.19,80.38,80.38,0,0,1-1.08,17.12C56.84,52,56.64,53.34,54.46,54a10.29,10.29,0,0,1-5.81-.51,25.89,25.89,0,0,1-6.17-3.29,28.81,28.81,0,0,1-5.4-4.91c-6.41-7.57-8.9-22.37-1.24-28.61,8.74-6.71,15.92-5.9,24.16.95.83.73,2.13,2.14,2.13,2.13A1.53,1.53,0,0,1,61.65,21.55Z"/><path d="M62.46,47.3a66.37,66.37,0,0,1,7.08,1.54s.88,1.15-.85,3a52.17,52.17,0,0,1-10,8.22,141.06,141.06,0,0,1-16.82,8.95c-2.23,1.44-4,2.73-4.12,5.92l-.52,8.74c-1.08.14-2.14.23-3.18.28a22.69,22.69,0,0,1-11.76-2.52C20.46,80.7,20,79.89,20,77.83V73.71c.14-5.09.94-7,5.1-10.59,3.14-2.72,6.51-5.42,9.42-8.36,2.3-2,3.85-4.26,3.8-6.35a5.73,5.73,0,0,0-1.24-3.17,28.81,28.81,0,0,0,5.4,4.91,25.89,25.89,0,0,0,6.17,3.29,10.29,10.29,0,0,0,5.81.51,8.69,8.69,0,0,0,4.6-2.63A18,18,0,0,0,61.63,47,3,3,0,0,0,62.46,47.3Z" style="opacity: 0.33"/><path d="M61.65,21.55a1.53,1.53,0,0,0,.48-1.84C64,22,64,25.3,64,28.46v3.2c0,1.16-.26,5.35-.5,7.08A35.43,35.43,0,0,1,61.63,47a18,18,0,0,1-2.57,4.35A8.69,8.69,0,0,1,54.46,54c2.18-.61,2.38-2,4.31-11.09a80.38,80.38,0,0,0,1.08-17.12A5.35,5.35,0,0,1,61.65,21.55Z" style="opacity: 0.67"/></g><path d="M33.09,86a24.12,24.12,0,0,1-11.71-2.74C18.58,82,18,80.2,18,77.83V73.71c.16-5.84,1.3-8.21,5.79-12.1.8-.7,1.62-1.39,2.44-2.08,2.34-2,4.76-4,6.86-6.18,2.12-1.87,3.26-3.62,3.23-4.89a3.78,3.78,0,0,0-.75-1.9,29.35,29.35,0,0,1-6.38-20.4c.44-4.74,2.31-8.57,5.39-11.08C39.05,11.65,43.21,10,47.35,10c4.55,0,9,1.92,13.93,6,.51.45,1.14,1.08,1.69,1.65h.09l.62.75C66,21.29,66,25.1,66,28.46v3.2c0,1.26-.27,5.52-.52,7.35a46.15,46.15,0,0,1-1.27,6.58,51.09,51.09,0,0,1,5.91,1.34c3.77,1.14,6.12,2.73,7.18,4.85a9.52,9.52,0,0,1,.67,3.7l0,5.88c0,2.73-1.58,4.19-3.1,5.6l-.47.44C69.55,72,64.36,75.26,58.07,78.73a60.76,60.76,0,0,1-20.61,7c-1.15.15-2.28.25-3.36.29C33.75,86,33.42,86,33.09,86Z" style="stroke-width: 4px;fill: none" data-element="outline"/></symbol><symbol id="search" viewBox="0 0 96 96"><path d="M68.62,18.17l-8.3-4.79a11,11,0,0,0-6.71-1.31l8.28,4.79A20,20,0,0,0,54,19.62,35.5,35.5,0,0,0,46,26l-8.29-4.78,0-.06A45,45,0,0,0,26.42,40.66c-.1.36-.2.72-.29,1.09C24.31,49,24.64,54.92,26.5,59a11.31,11.31,0,0,0,3.59,4.58L22.3,77.13A2,2,0,0,0,23,79.89l1.59.92,3.39,2,1.65,1A2,2,0,0,0,32.43,83l7.83-13.53c5,2.17,12,.45,19.45-6.16a45.2,45.2,0,0,0,13.9-23.2C76.27,28.94,73.82,21.17,68.62,18.17ZM61,37.26a39.68,39.68,0,0,1-9,15.55L60.3,57.6A28.34,28.34,0,0,1,54,62.73a15.73,15.73,0,0,1-6.35,2.2l-8.28-4.78-.48,0h0a15.59,15.59,0,0,1-1.47-7c0-10.58,7.43-23.45,16.59-28.74a15.74,15.74,0,0,1,6.83-2.25l.21.44a15.79,15.79,0,0,1,1.26,6.6A28.23,28.23,0,0,1,61,37.26Z" style="stroke: none" data-element="darker"/><g style="fill: currentcolor;stroke: none;" data-element="lighter"><path d="M52,52.81a28.61,28.61,0,0,1-6.36,5.13,16.08,16.08,0,0,1-6.34,2.21l-.48,0h0a15.59,15.59,0,0,1-1.47-7c0-10.58,7.43-23.45,16.59-28.74a15.74,15.74,0,0,1,6.83-2.25l.21.44a15.79,15.79,0,0,1,1.26,6.6A28.23,28.23,0,0,1,61,37.26,39.68,39.68,0,0,1,52,52.81Z" style="opacity: 0.25"/><path d="M52,52.81,60.3,57.6A28.34,28.34,0,0,1,54,62.73a15.73,15.73,0,0,1-6.35,2.2l-8.28-4.78a16.08,16.08,0,0,0,6.34-2.21A28.61,28.61,0,0,0,52,52.81Z"/><path d="M38.78,20.08c5.29-5,10.44-7.58,14.82-8h0l8.28,4.79A20,20,0,0,0,54,19.62,35.5,35.5,0,0,0,46,26l-8.29-4.78,0-.06C38,20.81,38.4,20.44,38.78,20.08Z"/><path d="M37,67.41,28,82.77l-3.39-2,9.18-15.64c1.07.68,2.13,1.49,3.17,2.23Z" style="opacity: 0.33"/><path d="M30.09,63.59l.07-.13.05-.05.09,0h.13a14,14,0,0,1,3.38,1.77L24.63,80.81,23,79.89a2,2,0,0,1-.74-2.76Z" style="opacity: 0.67"/><path d="M61,37.26l8.29,4.79a39.53,39.53,0,0,1-9,15.55L52,52.81a39.68,39.68,0,0,0,9-15.55Z" style="opacity: 0.67"/><path d="M39.32,60.15l8.28,4.78a8.39,8.39,0,0,1-8.77-4.74h0Z" style="opacity: 0.67"/><path d="M69.29,27.38a8.42,8.42,0,0,0-8.51-5.22l.21.44a15.79,15.79,0,0,1,1.26,6.6A28.23,28.23,0,0,1,61,37.26h0l8.29,4.79A28.23,28.23,0,0,0,70.55,34,16,16,0,0,0,69.29,27.38Z" style="opacity: 0.33"/><path d="M61.89,16.86l-8.28-4.79a11,11,0,0,1,6.71,1.31l8.3,4.79A11.1,11.1,0,0,0,61.89,16.86Z" style="opacity: 0.67"/><path d="M26.5,40.68l8.29,4.79a35.79,35.79,0,0,0-1.57,10.07,20.06,20.06,0,0,0,1.57,8.25L26.5,59c-1.86-4.09-2.19-10-.37-17.26.09-.37.19-.73.29-1.09Z" style="opacity: 0.33"/><path d="M37.72,21.24,46,26A49.73,49.73,0,0,0,34.79,45.47L26.5,40.68l-.08,0A45.06,45.06,0,0,1,37.66,21.19Z" style="opacity: 0.67"/></g><path d="M30.68,86a4.06,4.06,0,0,1-2-.54L22,81.62a4,4,0,0,1-1.47-5.49l7-12.11C23,59.49,21.71,51.16,24.19,41.26A46.91,46.91,0,0,1,37.4,18.63C43.34,13,49.4,10,54.92,10a12.53,12.53,0,0,1,6.4,1.65l8.3,4.79c6.43,3.71,8.65,12.73,5.93,24.12A47.46,47.46,0,0,1,61,64.79c-5.57,4.95-11.22,7.56-16.35,7.56a13.12,13.12,0,0,1-3.52-.46L34.16,84a4,4,0,0,1-3.48,2Z" style="stroke-width: 4px;fill: none" data-element="outline"/></symbol><symbol id="menu" viewBox="0 0 96 96"><g style="stroke: none" data-element="darker"><path d="M57,15.09l-1,.58V29.52h0l4-2.31V16.82a2,2,0,0,0-3-1.73Z"/><path d="M60,51.18V31.83l-4,2.31V48.87a6.53,6.53,0,0,1-.87,3.25l4,2.31A6.5,6.5,0,0,0,60,51.18Z"/><path d="M75,24.33a2,2,0,0,0-2,0l-1,.58V58.1a6.5,6.5,0,0,1-3.25,5.63L40,80.33V47.13a6.53,6.53,0,0,1,.87-3.25l-4-2.31A6.5,6.5,0,0,0,36,44.82V64.17L24,71.09V37.9a6.5,6.5,0,0,1,.87-3.25l-4-2.31A6.48,6.48,0,0,0,20,35.59V69.94a2,2,0,0,0,1,1.73L25,74a2,2,0,0,0,2,0l9-5.2v10.4a2,2,0,0,0,1,1.73l4,2.31a2,2,0,0,0,2,0L72.75,66a6.4,6.4,0,0,0,2.38-2.38A6.48,6.48,0,0,0,76,60.41V26.06A2,2,0,0,0,75,24.33Z"/></g><g style="fill: currentcolor;stroke: none;" data-element="lighter"><path d="M71.13,61.35a6.47,6.47,0,0,1-2.38,2.38L40,80.33V66.48L56.75,56.8A6.47,6.47,0,0,0,60,51.18V31.83l12-6.92V58.1A6.5,6.5,0,0,1,71.13,61.35Z" style="opacity: 0.25"/><path d="M55.13,52.12a6.47,6.47,0,0,1-2.38,2.38L40,61.86V47.13a6.5,6.5,0,0,1,3.25-5.63L56,34.14V48.87A6.53,6.53,0,.........完整代码请登录后点击上方下载按钮下载查看

网友评论0