js实现svg变色动画效果代码-html代码-BFW代码库

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看