svg+css+js实现带主题样式切换的tab选项卡代码-html代码-BFW代码库

代码语言：html
所属分类：选项卡
代码描述：svg+css+js实现带主题样式切换的tab选项卡代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  



  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&display=swap");
:root {
  --ink-color-0: white;
  --ink-color-5: #f6f6f7;
  --ink-color-10: #e9e9ee;
  --ink-color-15: #d8d8e0;
  --ink-color-20: #ccccd7;
  --ink-color-35: #a8a8b9;
  --ink-color-50: #81819a;
  --ink-color-60: #6e6e8a;
  --ink-color-80: #484859;
  --ink-color-100: #1d1d2d;
  --ink-color-80-alpha: #1d1d2dcc;
  --ink-lighter-color: white;
  --ink-lighter-inactive-color: white;
  --ink-darker-color: #a8a8b9;
  --ink-darker-inactive-color: #d8d8e0;
}

[data-theme=dark] {
  --ink-color-0: #1d1d2d;
  --ink-color-5: #262635;
  --ink-color-10: #313140;
  --ink-color-15: #404050;
  --ink-color-20: #49495c;
  --ink-color-35: #676780;
  --ink-color-50: #8b8Ba2;
  --ink-color-60: #9e9eb2;
  --ink-color-80: #cfcfd8;
  --ink-color-100: white;
  --ink-color-80-alpha: #ffffffcc;
  --ink-lighter-color: #676780;
  --ink-lighter-inactive-color: #404050;
  --ink-darker-color: #1d1d2d;
  --ink-darker-inactive-color: #1d1d2d;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: barlow;
  background: var(--ink-color-5);
  color: var(--ink-color-100);
}

svg {
  fill: currentcolor;
  stroke: currentcolor;
  overflow: visible;
  display: block;
}
svg.defs, svg[data-prep=true] {
  position: absolute;
  height: 0;
  width: 0;
}

symbol {
  overflow: visible;
}

.action-set {
  stroke-width: 5px;
}
.action-set.segmented {
  display: flex;
  position: relative;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: all 0.1s ease-in-out;
}
.action-set.segmented::before {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--ink-color-5);
  opacity: 0;
  transition: all 0.25s ease-in-out, opacity 0.1s ease-in-out;
}
.action-set.segmented:hover {
  background: var(--ink-color-0);
}
.action-set.segmented:hover::before {
  opacity: 1;
}
.action-set.segmented input {
  position: absolute;
  transform: scale(0);
}
.action-set.segmented input:checked + label {
  color: var(--ink-color-100);
}
.action-set.segmented input:checked + label svg {
  fill: var(--ink-color-0);
}
.action-set.segmented input:not(:checked):hover + label {
  color: var(--ink-color-80);
}
.action-set.segmented input:not(:checked) + label {
  cursor: pointer;
}
.action-set.segmented input:not(:checked) + label:active svg {
  stroke-width: 7px;
}
.action-set.segmented label {
  display: grid;
  justify-items: center;
  padding: 5px;
  border-radius: 3px;
  color: var(--ink-color-35);
  transition: all 0.1s ease-in-out;
}
.action-set.segmented label svg {
  height: 18px;
  aspect-ratio: 1;
  fill: transparent;
}
.action-set.segmented:has(input:nth-of-type(2):checked)::before {
  transform: translatex(100%);
}

[data-tooltip]:not([data-tooltip=""]) {
  position: relative;
}
[data-tooltip]:not([data-tooltip=""])::after {
  content: attr(data-tooltip);
  position: absolute;
  margin-block: 6px;
  border-radius: 3px;
  margin-inline: -8px;
  height: 24px;
  padding: 4px 7px;
  z-index: 1;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 14.5px;
  white-space: nowrap;
  opacity: 0;
  background-color: var(--ink-color-80-alpha);
  color: var(--ink-color-0);
  -webkit-text-fill-color: currentcolor;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  pointer-events: none;
  transition: all 0.1s ease-in-out;
  transform: scale(0);
}
[data-tooltip]:not([data-tooltip=""])::after {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  top: 100%;
  justify-self: center;
  align-self: start;
  transform-origin: top center;
}
[data-tooltip]:not([data-tooltip=""]):hover::after {
  opacity: 1;
  transition-delay: 0.25s;
  transform: scale(1);
}

body {
  font-family: barlow;
  background: var(--ink-color-5);
  color: var(--ink-color-100);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 18px;
}

main {
  position: relative;
  flex: 1 0 339px;
  max-width: 732px;
  display: grid;
  grid-template-rows: minmax(auto, 1fr) auto 5vh minmax(auto, 1fr);
  grid-template-columns: auto;
  grid-template-areas: "header" "content" "." "footer";
  transition: all 0.25s ease-in-out;
}
main[data-width=fixed] {
  max-width: 375px;
}

nav.tabs#demo {
  grid-area: content;
}

nav.tabs {
  position: relative;
  display: flex;
  justify-content: center;
  margin: -6px -11px 0;
  height: 41px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 22px;
}
nav.tabs::before {
  content: "";
  position: absolute;
  height: 1px;
  left: 11px;
  right: 11px;
  bottom: 0px;
  border-radius: 0.5px;
  color: var(--ink-color-20);
  background: currentcolor;
  box-shadow: 0 0 0 0.25px currentcolor;
  transform: translatey(-0.5px);
}
nav.tabs a {
  --item-fg-color: var(--ink-color-35);
  --item-bg-lighter-color: var(--ink-lighter-inactive-color);
  --item-bg-darker-color: var(--ink-darker-inactive-color);
  position: relative;
  box-sizing: content-box;
  display: grid;
  height: 24px;
  margin: 0 0 -6px;
  border-block: 6px transparent solid;
  border-inline: 11px transparent solid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  color: var(--item-fg-color);
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  transition: max-width 0.25s ease-in-out, color 0.1s ease-in-out;
}
nav.tabs a::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 0.5px;
  color: transparent;
  background: currentcolor;
  box-shadow: 0 0 0 0.25px currentcolor;
  transform: scalex(0) translatey(-0.5px);
  transition: all 0.1s ease-in-out;
  pointer-events: none;
}
nav.tabs a::after {
  display: none;
}
nav.tabs a:last-child::after {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  top: 100%;
  justify-self: end;
  align-self: start;
  transform-origin: top right;
}
nav.tabs a:first-child::after {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  top: 100%;
  justify-self: start;
  align-self: start;
  transform-origin: top left;
}
nav.tabs a.transition {
  pointer-events: none;
  overflow-x: hidden;
  height: 36px;
}
nav.tabs a.transition:not(.active) {
  -webkit-text-fill-color: currentcolor;
}
nav.tabs a.transition::after {
  display: none;
}
nav.tabs a.active {
  --item-fg-color: var(--ink-color-100);
  --item-bg-lighter-color: var(--ink-lighter-color);
  --item-bg-darker-color: var(--ink-darker-color);
  pointer-events: none;
}
nav.tabs a.active::before {
  color: var(--item-fg-color);
  transform: scalex(1) translatey(-0.5px);
}
nav.tabs a.active::after {
  display: none;
}
nav.tabs a:hover {
  --item-fg-color: var(--ink-color-100);
  --item-bg-lighter-color: var(--ink-lighter-color);
  --item-bg-darker-color: var(--ink-darker-color);
}
nav.tabs a:active svg {
  stroke-width: 4px;
}
nav.tabs a svg {
  pointer-events: none;
  height: 24px;
  aspect-ratio: 1;
  stroke: var(--item-fg-color);
  color: var(--item-bg-lighter-color);
  fill: var(--item-bg-darker-color);
  transition: all 0.1s ease-in-out;
}
nav.tabs.compact a:not(.active):not(.transition) {
  -webkit-text-fill-color: transparent;
  grid-template-columns: 24px;
  justify-items: center;
  font-size: 1px;
  line-height: 1em;
}
nav.tabs.compact a:not(.active):not(.transition)::after {
  display: block;
}
nav.tabs:not(.compact) a:active {
  -webkit-text-stroke: 0.035em currentcolor;
}

.action-set.segmented#theme {
  justify-self: center;
  align-self: start;
  grid-area: header;
}

.action-set.segmented#width {
  justify-self: center;
  align-self: end;
  grid-area: footer;
}
.action-set.segmented#width label::after {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  bottom: 100%;
  justify-self: center;
  align-self: end;
  transform-origin: bottom center;
}
</style>

  
</head>

  <body data-theme="light">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72" data-prep="true"><defs><symbol id="expedition" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m62.25,12.5c5.62,0,9.25,4.51,9.25,11.49,0,10.86-7.81,26.42-11.17,32.61-.07.13-.08.29-.02.44.06.14.18.25.33.29,1.17.32,2.24.75,3.18,1.29,2.34,1.35,3.68,3.31,3.68,5.38s-1.34,4.03-3.68,5.38c-2.11,1.22-4.89,1.89-7.82,1.89s-5.71-.67-7.82-1.89c-2.34-1.35-3.68-3.31-3.68-5.38s1.34-4.03,3.68-5.38c.08-.04.16-.09.23-.13.14-.08.24-.22.26-.37.02-.16-.04-.32-.15-.43-3.66-3.45-8.02-9.29-8.02-17.52,0-9.55,6.48-20.77,14.75-25.55,2.43-1.4,4.78-2.11,7-2.11m0-.5c-2.31,0-4.75.73-7.25,2.18-8.41,4.86-15,16.27-15,25.98,0,8.35,4.36,14.29,8.18,17.89-.08.04-.17.09-.25.14-2.5,1.44-3.93,3.56-3.93,5.82s1.43,4.37,3.93,5.81c2.19,1.26,5.05,1.96,8.07,1.96s5.88-.7,8.07-1.96c2.5-1.44,3.93-3.56,3.93-5.81s-1.43-4.37-3.93-5.81c-.98-.56-2.09-1.01-3.3-1.34,3.53-6.51,11.23-21.95,11.23-32.85,0-7.29-3.83-11.99-9.75-11.99h0Z"/><path d="m22.25.5c5.62,0,9.25,4.51,9.25,11.49,0,10.86-7.81,26.42-11.17,32.61-.07.13-.08.29-.02.44.06.14.18.25.33.29,1.18.32,2.25.75,3.18,1.29,2.34,1.35,3.68,3.31,3.68,5.38s-1.34,4.03-3.68,5.38c-2.11,1.22-4.89,1.89-7.82,1.89s-5.71-.67-7.82-1.89c-2.34-1.35-3.68-3.31-3.68-5.38s1.34-4.03,3.68-5.38c.08-.05.16-.09.24-.13.14-.08.23-.22.26-.38.02-.16-.04-.32-.15-.43C4.86,42.24.5,36.4.5,28.16.5,18.61,6.98,7.39,15.25,2.61c2.43-1.4,4.78-2.11,7-2.11m0-.5c-2.31,0-4.75.73-7.25,2.18C6.59,7.04,0,18.45,0,28.16c0,8.35,4.36,14.29,8.18,17.89-.08.05-.17.09-.25.14-2.5,1.44-3.93,3.56-3.93,5.82s1.43,4.37,3.93,5.81c2.19,1.26,5.05,1.96,8.07,1.96s5.88-.7,8.07-1.96c2.5-1.44,3.93-3.56,3.93-5.81s-1.43-4.37-3.93-5.81c-.97-.56-2.09-1.01-3.3-1.34,3.53-6.51,11.23-21.95,11.23-32.85,0-7.29-3.83-11.99-9.75-11.99h0Z"/></g><g data-layer="dark fill" style="stroke: none"><ellipse cx="16" cy="52" rx="10" ry="5.77"/><ellipse cx="56" cy="64" rx="10" ry="5.77"/><path d="m16,3.91C8.27,8.38,2,19.23,2,28.16c0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/><path d="m56,15.91c-7.73,4.46-14,15.32-14,24.25,0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/></g><g data-layer="light overlay fill" style="stroke: none; opacity: .4; fill: currentcolor"><ellipse cx="16" cy="52" rx="10" ry="5.77"/><ellipse cx="56" cy="64" rx="10" ry="5.77"/></g><g data-layer="light fill" style="stroke: none; fill: currentcolor"><ellipse cx="16" cy="20.08" rx="7.42" ry="4.29" transform="translate(-9.39 23.89) rotate(-60)"/><ellipse cx="56" cy="32.08" rx="7.42" ry="4.29" transform="translate(.22 64.53) rotate(-60)"/></g><g data-layer="thin linework" style="fill: none; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round"><path d="m28,70.5c-.66,0-1.28-.14-1.7-.38-.07-.04-.13-.08-.17-.12.04-.03.1-.07.17-.12.42-.24,1.04-.38,1.7-.38s1.28.14,1.7.38c.07.04.13.08.17.12-.04.03-.1.07-.17.12-.42.24-1.04.38-1.7.38Z"/><path d="m24,64.5c-.66,0-1.28-.14-1.7-.38-.07-.04-.13-.08-.17-.12.04-.03.1-.07.17-.12.42-.24,1.04-.38,1.7-.38s1.28.14,1.7.38c.07.04.13.08.17.12-.04.03-.1.07-.17.12-.42.24-1.04.38-1.7.38Z"/><path d="m38,68.5c-.66,0-1.28-.14-1.7-.38-.07-.04-.13-.08-.17-.12.04-.03.1-.07.17-.12.42-.24,1.04-.38,1.7-.38s1.28.14,1.7.38c.07.04.13.08.17.12-.04.03-.1.07-.17.12-.42.24-1.04.38-1.7.38Z"/></g><g data-layer="thick linework" style="fill: none; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round"><ellipse cx="16" cy="52" rx="10" ry="5.77"/><ellipse cx="56" cy="64" rx="10" ry="5.77"/><path d="m16,3.91C8.27,8.38,2,19.23,2,28.16c0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/><path d="m56,15.91c-7.73,4.46-14,15.32-14,24.25,0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/></g></symbol><symbol id="location" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m42.25.5c5.62,0,9.25,4.51,9.25,11.49,0,7.48-3.75,17.22-6.89,24.07l-.15.34.28.25,2.49,2.21.09.08.11.03,10.13,2.71c.22.06.43.17.61.33l7.98,7.08c.96.85,1.46,2.12,1.33,3.4-.13,1.28-.87,2.42-1.98,3.07l-26.4,15.24c-.8.46-1.71.7-2.63.7-1.29,0-2.53-.47-3.49-1.33l-8.2-7.28-.09-.08-.11-.03-10.13-2.71c-.22-.06-.43-.17-.61-.33l-7.98-7.08c-.96-.85-1.46-2.12-1.33-3.4.13-1.28.87-2.43,1.98-3.07l15.46-8.93.38-.22-.17-.4c-1.11-2.71-1.68-5.57-1.68-8.49,0-9.55,6.48-20.77,14.75-25.55,2.43-1.4,4.78-2.11,7-2.11m0-.5c-2.31,0-4.75.73-7.25,2.18-8.41,4.86-15,16.27-15,25.98,0,3,.58,5.91,1.72,8.68l-15.46,8.93c-1.25.72-2.09,2.01-2.23,3.45-.15,1.44.41,2.87,1.49,3.83l7.98,7.08c.23.21.51.36.81.44l10.13,2.71,8.2,7.28c1.06.94,2.41,1.45,3.82,1.45,1.01,0,2.01-.27,2.88-.77l26.4-15.24c1.25-.72,2.08-2.01,2.23-3.45.15-1.44-.41-2.87-1.49-3.83l-7.98-7.08c-.23-.21-.51-.36-.81-.44l-10.13-2.71-2.49-2.21c3.3-7.2,6.93-16.81,6.93-24.27S48.17,0,42.25,0h0Z"/></g><g data-layer="dark fill" style="stroke: none"><path d="m65.15,50.21c1.28,1.14,1.08,3.19-.41,4.05l-26.4,15.24c-1.4.81-3.17.63-4.38-.44l-8.56-7.59,31.76-18.34,7.98,7.09Z"/><path d="m42.62,36.77c3.62-7.67,7.38-17.45,7.38-24.78,0-8.93-6.27-12.55-14-8.08s-14,15.32-14,24.25c0,3.63.92,6.8,2.3,9.5l-17.04,9.84c-1.48.86-1.69,2.91-.41,4.05l7.98,7.08,18.78-10.84c.44.28.85.53,1.18.71.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27.34-.58.74-1.28,1.19-2.08l8.19-4.73-3.96-3.52Z"/></g><g data-layer="light overlay fill" style="stroke: none; opacity: .4; fill: currentcolor"><path d="m65.15,50.21c1.28,1.14,1.08,3.19-.41,4.05l-26.4,15.24c-1.4.81-3.17.63-4.38-.44l-8.56-7.59,31.76-18.34,7.98,7.09Z"/><path d="m38.4,45.02l8.19-4.73-3.96-3.52c-1.53,3.24-3.04,6.11-4.23,8.24Z"/><path d="m24.3,37.66l-17.04,9.84c-1.48.86-1.69,2.91-.41,4.05l7.98,7.08,18.78-10.84c-2.61-1.67-6.74-5.06-9.31-10.12Z"/></g><g data-layer="light fill" style="stroke: none; fill: currentcolor"><polygon points="57.18 43.12 25.41 61.47 14.82 58.63 46.59 40.29 57.18 43.12"/><ellipse cx="36" cy="20.08" rx="7.42" ry="4.29" transform="translate(.61 41.21) rotate(-60)"/></g><g data-layer="thin linework" style="fill: none; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round"></g><g data-layer="thick linework" style="fill: none; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round"><path d="m17.47,31.82"/><path d="m42.62,36.78l3.96,3.51,10.59,2.84,7.98,7.08c1.28,1.14,1.07,3.19-.41,4.05l-26.4,15.24c-1.4.81-3.16.63-4.38-.44l-8.56-7.59-10.59-2.84-7.98-7.08c-1.28-1.14-1.07-3.19.41-4.05l17.04-9.84"/><path d="m36,3.91c-7.73,4.46-14,15.32-14,24.25,0,11.58,9.39,18.48,12.79,20.34.34.18.78.12,1.21-.13.44-.25.87-.69,1.21-1.27,3.4-5.78,12.79-23.52,12.79-35.1,0-8.93-6.27-12.55-14-8.08Z"/></g></symbol><symbol id="object" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m36,.55c1.05,0,2.08.28,2.99.8l25.5,14.72c1.86,1.07,3.01,3.06,3.01,5.21v29.44c0,2.15-1.15,4.14-3.01,5.21l-25.5,14.72c-.91.53-1.94.8-2.99.8s-2.08-.28-2.99-.8l-25.5-14.72c-1.86-1.07-3.01-3.06-3.01-5.21v-29.44c0-2.15,1.15-4.14,3.01-5.21L33.01,1.35c.91-.53,1.94-.8,2.99-.8m0-.5c-1.12,0-2.24.29-3.24.87L7.26,15.64c-2.02,1.16-3.26,3.32-3.26,5.64v29.44c0,2.32,1.24,4.48,3.26,5.64l25.5,14.72c1,.58,2.12.87,3.24.87s2.24-.29,3.24-.87l25.5-14.72c2.02-1.16,3.26-3.32,3.26-5.64v-29.44c0-2.32-1.24-4.48-3.26-5.64L39.24.92c-1-.58-2.12-.87-3.24-.87h0Z"/></g><g data-layer="dark fill" style="stroke: none"><path d="m65.4,19.03l-29.4,16.97L6.6,19.03c-.38.68-.6,1.45-.6,2.25v29.44c0,1.61.86,3.11,2.26,3.91l25.5,14.72c.68.39,1.45.6,2.24.6s1.56-.21,2.24-.6l25.5-14.72c1.4-.8,2.26-2.3,2.26-3.91v-29.44c0-.8-.22-1.57-.6-2.25Z"/></g><g data-layer="light overlay fill" style="stroke: none; opacity: .4; fill: currentcolor"><path d="m36,36v33.95c-.79,0-1.56-.21-2.24-.6l-25.5-14.72c-1.4-.8-2.26-2.3-2.26-3.91v-29.44c0-.8.22-1.57.6-2.25l29.4,16.97Z"/></g><g data-layer="light fill" style="stroke: none; fill: currentcolor"><path d="m63.74,17.37c.7.4,1.27.98,1.66,1.66l-29.4,16.97L6.6,19.03c.39-.68.96-1.26,1.66-1.66L33.76,2.65c.68-.39,1.45-.6,2.24-.6s1.56.21,2.24.6c0,0,25.5,14.72,25.5,14.72Z"/></g><g data-layer="thin linework" style="fill: none; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round"><line x1="36" y1="69.95" x2="36" y2="36"></line><line x1="36" y1="36" x2="65.4" y2="19.03"></line><line x1="36" y1="36" x2="6.6" y2="19.03"></line></g><g data-layer="thick linework" style="fill: none; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round"><path d="m36,69.95c-.79,0-1.56-.21-2.24-.6l-25.5-14.72c-1.4-.8-2.26-2.3-2.26-3.91v-29.44c0-.8.22-1.57.6-2.25.39-.68.96-1.26,1.66-1.66L33.76,2.65c.68-.39,1.45-.6,2.24-.6s1.56.21,2.24.6l25.5,14.72c.7.4,1.27.98,1.66,1.66.38.68.6,1.45.6,2.25v29.44c0,1.61-.86,3.11-2.26,3.91l-25.5,14.72c-.68.39-1.45.6-2.24.6Z"/></g></symbol><symbol id="package" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m36,.55c1.05,0,2.08.28,2.99.8l25.5,14.72c1.86,1.07,3.01,3.06,3.01,5.21v29.44c0,2.15-1.15,4.14-3.01,5.21l-25.5,14.72c-.91.53-1.94.8-2.99.8s-2.08-.28-2.99-.8l-25.5-14.72c-1.86-1.07-3.01-3.06-3.01-5.21v-29.44c0-2.15,1.15-4.14,3.01-5.21L33.01,1.35c.91-.53,1.94-.8,2.99-.8m0-.5c-1.12,0-2.24.29-3.24.87L7.26,15.64c-2.02,1.16-3.26,3.32-3.26,5.64v29.44c0,2.32,1.24,4.48,3.26,5.64l25.5,14.72c1,.58,2.12.87,3.24.87s2.24-.29,3.24-.87l25.5-14.72c2.02-1.16,3.26-3.32,3.26-5.64v-29.44c0-2.32-1.24-4.48-3.26-5.64L39.24.92c-1-.58-2.12-.87-3.24-.87h0Z"/></g><g data-layer="dark fill" style="stroke: none"><path d="m65.4,19.03l-29.4,16.97-12.85-7.42,30-17.32-4-2.31-30,17.32-12.55-7.24c-.38.68-.6,1.45-.6,2.25v29.44c0,1.61.86,3.11,2.26,3.91l25.5,14.72c.68.39,1.45.6,2.24.6s1.56-.21,2.24-.6l25.5-14.72c1.4-.8,2.26-2.3,2.26-3.91v-29.44c0-.8-.22-1.57-.6-2.25Z"/></g><g data-layer="light overlay fill" style="stroke: none; opacity: .4; fill: currentcolor"><path d="m23.15,28.58v12.27c0,.77-.83,1.25-1.5.87l-1.5-.87c-.62-.36-1-1.02-1-1.73v-12.84h0s-12.55-7.24-12.55-7.24c-.38.68-.6,1.45-.6,2.25v29.44c0,1.61.86,3.11,2.26,3.91l25.5,14.72c.68.39,1.45.6,2.24.6v-33.95l-12.85-7.42h0Z"/></g><g data-layer="light fill" style="stroke: none; fill: currentcolor"><path d="m63.74,17.37c.7.4,1.27.98,1.66,1.66l-29.4,16.97L6.6,19.03c.39-.68.96-1.26,1.66-1.66L33.76,2.65c.68-.39,1.45-.6,2.24-.6s1.56.21,2.24.6c0,0,25.5,14.72,25.5,14.72Z"/></g><g data-layer="thin linework" style="fill: none; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round"><line x1="36" y1="69.95" x2="36" y2="36"></line><line x1="36" y1="36" x2="65.4" y2="19.03"></line><line x1="36" y1="36" x2="6.6" y2="19.03"></line></g><g data-layer="thick linework" style="fill: none; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round"><path d="m36,69.95c-.79,0-1.56-.21-2.24-.6l-25.5-14.72c-1.4-.8-2.26-2.3-2.26-3.91v-29.44c0-.8.22-1.57.6-2.25.39-.68.96-1.26,1.66-1.66L33.76,2.65c.68-.39,1.45-.6,2.24-.6s1.56.21,2.24.6l25.5,14.72c.7.4,1.27.98,1.66,1.66.38.68.6,1.45.6,2.25v29.44c0,1.61-.86,3.11-2.26,3.91l-25.5,14.72c-.68.39-1.45.6-2.24.6Z"/></g></symbol><symbol id="person" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m35.39.5c4.19,0,8.29,1.78,12.89,5.6.3.27.61.56.95.9.33.33,1.12,1.16,1.14,1.18.05.05.1.1.14.15,2.1,2.57,2.1,6.1,2.1,9.21v3.03c0,1.19-.25,5.2-.48,6.88-.26,1.86-.59,4.01-1.16,6.04-.04.14-.02.28.06.4.07.12.2.2.34.23,1.75.32,3.62.68,5.42,1.22,3.46,1.05,5.6,2.49,6.55,4.4.34.69.52,1.68.59,3.31l.03,5.55c0,2.4-1.41,3.72-2.78,4.99l-.46.43c-4.6,4.34-9.48,7.39-15.38,10.64-6.04,3.34-13.09,5.73-19.33,6.53-1.1.14-2.16.24-3.14.28-.33,0-.63.01-.93.01-4.14,0-7.9-.88-10.92-2.55-2.45-1.09-2.95-2.63-2.95-4.78v-3.88c.15-5.45,1.15-7.53,5.33-11.15.79-.69,1.6-1.38,2.43-2.08,2.17-1.84,4.42-3.75,6.36-5.71,2.08-1.85,3.21-3.6,3.18-4.92,0-.55-.34-1.52-.79-2.03-4.15-4.91-6.54-12.54-5.94-18.99.41-4.37,2.12-7.89,4.94-10.19C27.7,2.04,31.57.5,35.39.5m0-.5c-3.93,0-7.89,1.57-12.13,4.82-2.94,2.39-4.71,6.04-5.13,10.54-.61,6.57,1.81,14.34,6.05,19.36.37.41.67,1.27.68,1.72.03,1.16-1.03,2.78-3.01,4.54-1.95,1.97-4.19,3.88-6.36,5.72-.82.69-1.63,1.38-2.42,2.07-4.27,3.69-5.35,5.94-5.51,11.51v3.89c0,2.28.55,4.04,3.24,5.23,3.06,1.7,6.9,2.59,11.12,2.59.31,0,.61,0,.94-.01,1-.04,2.07-.14,3.19-.28,6.3-.82,13.41-3.22,19.51-6.59,5.93-3.26,10.84-6.33,15.48-10.71l.46-.43c1.38-1.28,2.94-2.73,2.94-5.35l-.03-5.56c-.08-1.72-.27-2.78-.64-3.53-1.01-2.04-3.24-3.57-6.85-4.66-1.86-.56-3.81-.93-5.47-1.23.57-2.03.9-4.17,1.18-6.11.24-1.71.48-5.75.48-6.95v-3.03c0-3.2,0-6.82-2.21-9.53-.06-.07-.12-.14-.19-.2,0,0-.79-.83-1.12-1.16-.32-.32-.64-.63-.98-.92-4.71-3.91-8.91-5.73-13.22-5.73h0Z"/></g><g data-layer="dark fill" style="stroke: none"><path d="m62.41,43.15c-.05-1.23-.17-2.2-.44-2.73-.87-1.76-3.12-2.87-5.63-3.63-2.32-.69-4.85-1.11-6.69-1.44-.49-.13-.79-.32-.79-.32.95-2.33,1.4-5.11,1.77-7.77.23-1.64.47-5.59.47-6.68v-3.03c0-2.99,0-6.11-1.76-8.27-.01,0-.57-.6-1.17-1.21-1.57.69-3.79,4.25-3.64,7.05.21,4.01-.05,10.81-.97,15.47l-.21,1c-.79,3.75-1.41,6.73-1.85,7.44-.36,1.29-1.8,2.61-1.99,2.77-.96-.08-1.93-.28-2.89-.65h0c-3.84-1.37-8.04-4.33-10.93-7.75.69.79,1.16,2.11,1.17,2.99.05,1.97-1.41,4.08-3.59,6-2.75,2.77-5.93,5.32-8.89,7.89-3.93,3.4-4.68,5.2-4.81,10v3.89c0,1.95.43,2.71,2.13,3.44,3.17,1.79,7.08,2.49,11.09,2.37.99-.04,2-.13,3.01-.27,6.39-.83,13.31-3.32,18.8-6.36,6.37-3.51,10.85-6.44,15.07-10.41,1.52-1.44,2.77-2.37,2.77-4.32l-.03-5.48Z"/></g><g data-layer="light overlay fill" style="stroke: none; opacity: .4; fill: currentcolor"><path d="m56.35,36.79c-2.32-.69-4.85-1.11-6.69-1.44-.49-.13-.79-.32-.79-.32.95-2.33,1.4-5.11,1.77-7.77.23-1.64.47-5.59.47-6.68v-3.03c0-2.99,0-6.11-1.76-8.27-.01,0-.57-.6-1.17-1.21-1.57.69-3.79,4.25-3.64,7.05.21,4.01-.05,10.81-.97,15.47l-.21,1c-.79,3.75-1.41,6.73-1.85,7.44-.36,1.29-1.8,2.61-1.99,2.77-.96-.08-1.93-.28-2.89-.65h0c-3.84-1.37-8.04-4.33-10.93-7.75.69.79,1.16,2.11,1.17,2.99.05,1.97-1.41,4.08-3.59,6-2.75,2.77-5.93,5.32-8.89,7.89-3.93,3.4-4.68,5.2-4.81,10v3.89c0,1.95.43,2.71,2.13,3.44,3.17,1.79,7.08,2.49,11.09,2.37.99-.04,2-.13,3.01-.27l.49-8.24c.08-3.01,1.79-4.24,3.88-5.6,0,0,8.35-3.64,15.89-8.45,4.99-3.17,8.51-6.65,9.47-7.76,1.64-1.79.83-2.85.81-2.88Z"/></g><g data-layer="light fill" style="stroke: none; fill: currentcolor"><path d="m47.33,7.27c.25.23.55.51.84.8-1.57.69-3.79,4.25-3.64,7.05.21,4.01-.05,10.81-.97,15.47l-.21,1c-.79,3.75-1.41,6.73-1.85,7.44-.36,1.29-1.8,2.61-1.99,2.77-.96-.08-1.93-.28-2.89-.65h0c-3.84-1.37-8.04-4.33-10.93-7.75-6.05-7.16-8.4-21.13-1.16-27.03C32.77.04,39.55.8,47.33,7.27Z"/></g><g data-layer="thin linework" style="fill: none; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round"><path d="m48.87,35.03c-.65,1.44-1.47,3.05-2.43,4.11-1.23,1.32-2.71,2.13-4.33,2.49-.84.19-1.72.24-2.6.17-.96-.08-1.93-.28-2.89-.65h0c-3.84-1.37-8.04-4.33-10.93-7.75"/></g><g data-layer="thick linework" style="fill: none; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round"><path d="m25.8,69.72c6.39-.83,13.31-3.32,18.8-6.36,6.37-3.51,10.85-6.44,15.07-10.41,1.52-1.44,2.77-2.37,2.77-4.32l-.03-5.48c-.05-1.23-.17-2.2-.44-2.73-.87-1.76-3.12-2.87-5.63-3.63-2.32-.69-4.85-1.11-6.69-1.44-.49-.13-.79-.32-.79-.32.95-2.33,1.4-5.11,1.77-7.77.23-1.64.47-5.59.47-6.68v-3.03c0-2.99,0-6.11-1.76-8.27-.01,0-.57-.6-1.17-1.21-.29-.29-.59-.57-.84-.8C39.55.8,32.77.04,24.52,6.37c-7.24,5.89-4.89,19.87,1.16,27.03.69.79,1.16,2.11,1.17,2.99.05,1.97-1.41,4.08-3.59,6-2.75,2.77-5.93,5.32-8.89,7.89-3.93,3.4-4.68,5.2-4.81,10v3.89c0,1.95.43,2.71,2.13,3.44,3.17,1.79,7.08,2.49,11.09,2.37.99-.04,2-.13,3.01-.27Z"/></g></symbol><symbol id="settings" viewBox="0 0 72 72"><g data-layer="silhouette outline" style="fill: none; stroke-linejoin: round; stroke-linecap: round"><path d="m44.2.5c.38,0,.74.07,1.1.21.6.22,1.23.52,1.83.86l13.09,7.55c.65.39,1.18.75,1.68,1.13,1.29.99,1.59,2.95.78,5.1l-.84,2.18-.15.4.37.21,4.22,2.45c.94.53,1.52,1.48,1.61,2.69.08.86.12,1.76.12,2.67,0,.81-.03,1.69-.1,2.71-.1,1.73-1.07,3.64-2.47,4.88l-3.25,2.87c-.6.54-1.06,1.3-1.31,2.13-.15.52-.19.98-.11,1.23l.02.07.04.06,1.66,2.39c.88,1.2.82,3.21-.14,5.14-.52,1.02-1.05,2-1.58,2.9-.55.95-1.11,1.86-1.65,2.73-1.1,1.73-2.71,2.8-4.22,2.8-.08,0-.15,0-.22,0l-2.92-.27h-.11s-.11.03-.11.03c-.05.02-.13.05-.23.11-.83.48-1.63,1.67-1.86,2.78l-.87,4.24c-.36,1.78-1.52,3.56-2.95,4.53-.71.49-1.47.97-2.34,1.48-.7.4-1.52.85-2.33,1.22-.52.27-1.08.41-1.61.41-.4.........完整代码请登录后点击上方下载按钮下载查看