svg柱状图图表动画展示效果代码

代码语言:html

所属分类:图表

代码描述:svg柱状图图表动画展示效果代码

代码标签: svg 图表 动画 柱状图

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
#Master_2 {
  transform: translateX(100%);
  -webkit-animation: moveMenu 2000ms ease-out both;
          animation: moveMenu 2000ms ease-out both;
  -webkit-animation-delay: 2000ms;
          animation-delay: 2000ms;
}

.firstGraph *,
.secGraph *,
.thirdGraph * {
  transform-box: fill-box;
  transform-origin: center bottom;
  -webkit-animation: growAnim 300ms ease-out both;
          animation: growAnim 300ms ease-out both;
}

.firstGraph .sec {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.firstGraph .third {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.secGraph .first {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.secGraph .sec {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

.secGraph .third {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

.thirdGraph .first {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}

.thirdGraph .sec {
  -webkit-animation-delay: 700ms;
          animation-delay: 700ms;
}

.thirdGraph .third {
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}

#text_7,
#text_8,
#text_9 {
  -webkit-animation: textFade 300ms ease-out both;
          animation: textFade 300ms ease-out both;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

#text_8 {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

#text_9 {
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}

#cursor {
  transform-box: fill-box;
  transform-origin: center;
  -webkit-animation: cursorAnim 2000ms linear both;
          animation: cursorAnim 2000ms linear both;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}

#Main_2 {
  transform-box: fill-box;
  transform-origin: center;
  -webkit-clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%);
          clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%);
  -webkit-animation: showUp 300ms linear both;
          animation: showUp 300ms linear both;
  -webkit-animation-delay: 3200ms;
          animation-delay: 3200ms;
}

.newFirst,
.newSec,
.newThird {
  transform-box: fill-box;
  transform-origin: center bottom;
  -webkit-animation: growAnim 300ms ease-out both;
          animation: growAnim 300ms ease-out both;
  -webkit-animation-delay: 3500ms;
          animation-delay: 3500ms;
}

.textFirst,
.textSec,
.textThird {
  -webkit-animation: textFade 300ms ease-out both;
          animation: textFade 300ms ease-out both;
  -webkit-animation-delay: 3800ms;
          animation-delay: 3800ms;
}

.newSec {
  -webkit-animation-delay: 3700ms;
          animation-delay: 3700ms;
}

.newThird {
  -webkit-animation-delay: 3900ms;
          animation-delay: 3900ms;
}

.textSec {
  -webkit-animation-delay: 4000ms;
          animation-delay: 4000ms;
}

.textThird {
  -webkit-animation-delay: 4200ms;
          animation-delay: 4200ms;
}

@-webkit-keyframes moveMenu {
  0% {
    transform: translateX(100%);
  }

  30% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes moveMenu {
  0% {
    transform: translateX(100%);
  }

  30% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@-webkit-keyframes growAnim {
  0% {
    transform: scale(1, 0);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes growAnim {
  0% {
    transform: scale(1, 0);
  }

  100% {
    transform: scale(1, 1);
  }
}

@-webkit-keyframes textFade {
  0% {
    transform: translateY(5%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes textFade {
  0% {
    transform: translateY(5%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes cursorAnim {
  0% {
    transform: translate(-500%, 0) scale(1);
    opacity: 0;
  }

  15% {
    transform: translate(-250%, 0) scale(1);
    opacity: 1;
  }

  30% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  40% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  45% {
    transform: translate(0, 0) scale(0.8);
    opacity: 1;
  }

  50% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  60% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  80% {
    transform: translate(-600%, 200%) scale(1);
    opacity: 1;
  }

  90% {
    transform: translate(-600%, 200%) scale(1);
    opacity: 1;
  }

  95% {
    transform: translate(-600%, 200%) scale(0.8);
    opacity: 1;
  }

  100% {
    transform: translate(-600%, 200%) scale(1);
    opacity: 0;
  }
}

@keyframes cursorAnim {
  0% {
    transform: translate(-500%, 0) scale(1);
    opacity: 0;
  }

  15% {
    transform: translate(-250%, 0) scale(1);
    opacity: 1;
  }

  30% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  40% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  45% {
    transform: translate(0, 0) scale(0.8);
    opacity: 1;
  }

  50% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  60% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  80% {
    transform: translate(-600%, 200%) scale(1);
    opacity: 1;
  }

  90% {
    transform: translate(-600%, 200%) scale(1);
    opacity: 1;
  }

  95% {
    transform: translate(-600%, 200%) scale(0.8);
    opacity: 1;
  }

  100% {
    transform: translate(-600%, 200%) scale(1);
    opacity: 0;
  }
}

@-webkit-keyframes showUp {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes showUp {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

body {
  overflow: hidden;
}
svg {
  position: absolute;
  inset: 0;
}
#playCheck {
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
#playCheck:checked ~ svg * {
  -webkit-animation-name: none !important;
          animation-name: none !important;
  display: none;
}
.clickText {
  position: absolute;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: sans-serif;
  font-size: 1.2em;
  color: gray;
  transition: opacity 300ms linear 0ms;
}
#playCheck:checked ~ .clickText {
  opacity: 1;
}
</style>



</head>

<body >
  <input type="checkbox" id="playCheck" />
<div class="clickText">Click again to replay</div>
<svg width="100vw" height="100vh" viewBox="0 0 664 566" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g id="Frame 2152">
    <g id="Images - Product">
      <g id="Frame 2149">
        <g id="Main" filter="url(#filter0_dddd_5074_68376)">
          <g clip-path="url(#clip0_5074_68376)">
            <rect x="80" y="80" width="504" height="406" rx="13.9848" fill="white" />
            <g id="Frame 2017" clip-path="url(#clip1_5074_68376)">
              <g id="graph">
                <path id="Vector" d="M157.012 400H669.947" stroke="#E9E9E9" stroke-width="0.473416" stroke-miterlimit="10" stroke-linecap="square" stroke-dasharray="0.47 0.47 0.47 0.47 0.47 0.47" />
                <path id="Vector_2" d="M157.012 298H669.947" stroke="#E9E9E9" stroke-width="0.473416" stroke-miterlimit="10" stroke-linecap="square" stroke-dasharray="0.47 0.47 0.47 0.47 0.47 0.47" />
                <path id="Vector_3" d="M157.012 361H669.947" stroke="#E9E9E9" stroke-width="0.473416" stroke-miterlimit="10" stroke-linecap="square" stroke-dasharray="0.47 0.47 0.47 0.47 0.47 0.47" />
                <path id="Vector_4" d="M157.012 233.797H669.947" stroke="#E9E9E9" stroke-width="0.473416" stroke-miterlimit="10" stroke-linecap="square" stroke-dasharray="0.47 0.47 0.47 0.47 0.47 0.47" />
                <g id="Dates">
                  <path id="text" d="M211.983 411.455H211.203V416.607H211.139L207.56 411.455H206.793V418H207.585V412.861H207.649L211.216 418H211.983V411.455ZM219.092 414.727C219.092 412.656 217.877 411.365 216.203 411.365C214.528 411.365 213.313 412.656 213.313 414.727C213.313 416.798 214.528 418.089 216.203 418.089C217.877 418.089 219.092 416.798 219.092 414.727ZM218.325 414.727C218.325 416.428 217.391 417.348 216.203 417.348C215.014 417.348 214.08 416.428 214.08 414.727C214.08 413.027 215.014 412.107 216.203 412.107C217.391 412.107 218.325 413.027 218.325 414.727ZM220.385 411.455H219.554L221.958 418H222.776L225.179 411.455H224.348L222.405 416.964H222.328L220.385 411.455Z" fill="#898989" />
                  <path id="text_2" d="M320.812 418C322.807 418 323.932 416.76 323.932 414.714C323.932 412.682 322.807 411.455 320.902 411.455H318.793V418H320.812ZM319.585 417.297V412.158H320.851C322.385 412.158 323.165 413.129 323.165 414.714C323.165 416.312 322.385 417.297 320.761 417.297H319.585ZM325.261 418H329.263V417.297H326.054V415.072H329.007V414.369H326.054V412.158H329.212V411.455H325.261V418ZM335.907 413.5C335.664 412.158 334.591 411.365 333.274 411.365C331.599 411.365 330.385 412.656 330.385 414.727C330.385 416.798 331.599 418.089 333.274 418.089C334.591 418.089 335.664 417.297 335.907 415.955H335.115C334.923 416.862 334.143 417.348 333.274 417.348C332.085 417.348 331.152 416.428 331.152 414.727C331.152 413.027 332.085 412.107 333.274 412.107C334.143 412.107 334.923 412.592 335.115 413.5H335.907Z" fill="#898989" />
                  <path id="text_3" d="M432.298 411.455V416.134C432.298 416.949 431.908 417.386 431.224 417.386C430.601 417.386 430.151 417.022 430.151 416.466H429.371C429.371 417.473 430.151 418.089 431.224 418.089C432.362 418.089 433.091 417.39 433.091 416.134V411.455H432.298ZM434.948 418L435.606 416.146H438.252L438.911 418H439.742L437.338 411.455H436.52L434.117 418H434.948ZM435.855 415.443L436.904 412.49H436.955L438.003 415.443H435.855ZM445.952 411.455H445.172V416.607H445.108L441.528 411.455H440.761V418H441.554V412.861H441.618L445.185 418H445.952V411.455ZM450.235 414.727C450.235 416.338 450.67 417.68 451.45 418.818H452.114C451.501 417.974 451.015 416.249 451.015 414.727C451.015 413.206 451.501 411.48 452.114 410.636H451.45C450.67 411.774 450.235 413.116 450.235 414.727ZM453.33 418H454.122V415.072H456.96V414.369H454.122V412.158H457.254V411.455H453.33V418ZM460.144 418.102C461.473 418.102 462.368 417.092 462.368 415.571C462.368 414.037 461.473 413.027 460.144 413.027C458.814 413.027 457.919 414.037 457.919 415.571C457.919 417.092 458.814 418.102 460.144 418.102ZM460.144 417.425C459.134 417.425 458.673 416.555 458.673 415.571C458.673 414.587 459.134 413.705 460.144 413.705C461.154 413.705 461.614 414.587 461.614 415.571C461.614 416.555 461.154 417.425 460.144 417.425ZM463.519 418H464.274V414.893C464.274 414.229 464.798 413.743 465.514 413.743C465.715 413.743 465.923 413.781 465.974 413.794V413.027C465.888 413.021 465.69 413.014 465.578 413.014C464.99 413.014 464.478 413.347 464.299 413.832H464.248V413.091H463.519V418ZM468.777 418.102C469.774 418.102 470.503 417.604 470.733 416.862L470.004 416.658C469.812 417.169 469.368 417.425 468.777 417.425C467.892 417.425 467.281 416.853 467.246 415.801H470.81V415.482C470.81 413.653 469.723 413.027 468.7 413.027C467.371 413.027 466.489 414.075 466.489 415.584C466.489 417.092 467.358 418.102 468.777 418.102ZM467.246 415.149C467.297 414.385 467.837 413.705 468.7 413.705C469.518 413.705 470.043 414.318 470.043 415.149H467.246ZM473.951 418.102C475.038 418.102 475.754 417.438 475.882 416.568H475.127C474.987 417.105 474.539 417.425 473.951 417.425C473.056 417.425 472.481 416.683 472.481 415.545C472.481 414.433 473.069 413.705 473.951 413.705C474.616 413.705 475.012 414.114 475.127 414.561H475.882C475.754 413.641 474.974 413.027 473.938 413.027C472.609 413.027 471.727 414.075 471.727 415.571C471.727 417.041 472.571 418.102 473.951 418.102ZM478.429 418.115C479.285 418.115 479.733 417.655 479.886 417.335H479.925V418H480.679V414.766C480.679 413.206 479.49 413.027 478.864 413.027C478.122 413.027 477.278 413.283 476.895 414.178L477.611 414.433C477.777 414.075 478.17 413.692 478.889 413.692C479.583 413.692 479.925 414.059 479.925 414.689V414.714C479.925 415.079 479.554 415.047 478.659 415.162C477.748 415.28 476.754 415.482 476.754 416.607C476.754 417.565 477.496 418.115 478.429 418.115ZM478.544 417.438C477.943 417.438 477.508 417.169 477.508 416.645C477.508 416.07 478.033 415.891 478.621 415.814C478.94 415.776 479.797 415.686 479.925 415.533V416.223C479.925 416.837 479.439 417.438 478.544 417.438ZM485.533 414.19C485.296 413.494 484.766 413.027 483.794 413.027C482.759 413.027 481.992 413.615 481.992 414.446C481.992 415.124 482.394 415.577 483.296 415.788L484.114 415.98C484.609 416.095 484.843 416.332 484.843 416.67C484.843 417.092 484.395 417.438 483.692 417.438C483.075 417.438 482.688 417.172 482.554 416.645L481.838 416.824C482.014 417.658 482.701 418.102 483.705 418.102C484.846 418.102 485.622 417.479 485.622 416.632C485.622 415.948 485.194 415.517 484.318 415.303L483.59 415.124C483.008 414.98 482.746 414.785 482.746 414.408C482.746 413.986 483.193 413.679 483.794 413.679C484.453 413.679 484.724 414.043 484.855 414.382L485.533 414.19ZM488.893 413.091H487.844V411.915H487.09V413.091H486.349V413.73H487.09V416.798C487.09 417.655 487.78 418.064 488.42 418.064C488.701 418.064 488.88 418.013 488.982 417.974L488.829 417.297C488.765 417.31 488.663 417.335 488.496 417.335C488.164 417.335 487.844 417.233 487.844 416.594V413.73H488.893V413.091ZM491.638 415.239C491.638 413.628 491.203 412.286 490.424 411.148H489.759C490.372 411.991 490.858 413.717 490.858 415.239C490.858 416.76 490.372 418.486 489.759 419.33H490.424C491.203 418.192 491.638 416.849 491.638 415.239Z" fill="#898989" />
                </g>
              </g>
            </g>
            <path id="Vector_5" opacity="0.16" d="M551 131L108 131" stroke="#0A2144" stroke-miterlimit="10" stroke-linecap="square" />
            <path id="text_4" d="M124.316 236.727H124.782V236.094C125.976 236.011 126.646 235.307 126.646 234.42C126.646 233.33 125.612 232.977 125.01 232.818L124.782 232.756V230.736C125.385 230.795 125.822 231.119 125.885 231.636H126.566C126.538 230.807 125.811 230.176 124.782 230.108V229.455H124.316V230.116C123.342 230.216 122.612 230.835 122.612 231.727C122.612 232.511 123.18 232.977 124.089 233.239L124.316 233.304V235.455C123.72 235.392 123.231 235.085 123.18 234.5H122.453C122.518 235.395 123.2 236.02 124.316 236.094V236.727ZM124.782 235.455V233.438L124.805 233.443C125.419 233.614 125.964 233.83 125.964 234.409C125.964 234.98 125.47 235.378 124.782 235.455ZM124.316 232.631C123.885 232.509 123.294 232.27 123.294 231.693C123.294 231.202 123.691 230.827 124.316 230.744V232.631ZM129.52 236.08C130.628 236.08 131.441 235.261 131.441 234.148C131.441 233.02 130.657 232.193 129.588 232.193C129.196 232.193 128.816 232.332 128.577 232.523H128.543L128.748 230.807H131.179V230.182H128.157L127.804 233.045L128.463 233.125C128.705 232.952 129.117 232.827 129.475 232.83C130.216 232.835 130.759 233.398 130.759 234.159C130.759 234.906 130.236 235.455 129.52 235.455C128.924 235.455 128.449 235.071 128.395 234.545H127.713C127.756 235.432 128.52 236.08 129.52 236.08ZM134.467 236.08C135.751 236.08 136.49 234.991 136.49 233.091C136.49 231.205 135.74 230.102 134.467 230.102C133.194 230.102 132.444 231.205 132.444 233.091C132.444 234.991 133.183 236.08 134.467 236.08ZM134.467 235.455C133.62 235.455 133.126 234.605 133.126 233.091C133.126 231.58 133.626 230.716 134.467 230.716C135.308 230.716 135.808 231.58 135.808 233.091C135.808 234.605 135.314 235.455 134.467 235.455ZM139.467 236.08C140.751 236.08 141.49 234.991 141.49 233.091C141.49 231.205 140.74 230.102 139.467 230.102C138.194 230.102 137.444 231.205 137.444 233.091C137.444 234.991 138.183 236.08 139.467 236.08ZM139.467 235.455C138.62 235.455 138.126 234.605 138.126 233.091C138.126 231.58 138.626 230.716 139.467 230.716C140.308 230.716 140.808 231.58 140.808 233.091C140.808 234.605 140.314 235.455 139.467 235.455ZM142.672 236H143.376V234.114L144.103 233.295L146.126 236H146.978L144.535 232.807L146.978 230.182H146.058L143.444 233.068H143.376V230.182H142.672V236Z" fill="#353D46" />
            <path id="text_5" d="M122.886 301.727H123.352V301.094C124.545 301.011 125.215 300.307 125.215 299.42C125.215 298.33 124.181 297.977 123.579 297.818L123.352 297.756V295.736C123.954 295.795 124.391 296.119 124.454 296.636H125.136C125.107 295.807 124.38 295.176 123.352 295.108V294.455H122.886V295.116C121.911 295.216 121.181 295.835 121.181 296.727C121.181 297.511 121.749 297.977 122.658 298.239L122.886 298.304V300.455C122.289 300.392 121.8 300.085 121.749 299.5H121.022C121.087 300.395 121.769 301.02 122.886 301.094V301.727ZM123.352 300.455V298.438L123.374 298.443C123.988 298.614 124.533 298.83 124.533 299.409C124.533 299.98 124.039 300.378 123.352 300.455ZM122.886 297.631C122.454 297.509 121.863 297.27 121.863 296.693C121.863 296.202 122.261 295.827 122.886 295.744V297.631ZM128.237 301.08C129.365 301.08 130.203 300.372 130.203 299.42C130.203 298.682 129.766 298.145 129.033 298.023V297.977C129.621 297.798 129.987 297.315 129.987 296.659C129.987 295.835 129.337 295.102 128.26 295.102C127.254 295.102 126.419 295.722 126.385 296.636H127.067C127.092 296.057 127.643 295.716 128.249 295.716C128.891 295.716 129.305 296.105 129.305 296.693C129.305 297.307 128.825 297.705 128.135 297.705H127.669V298.33H128.135C129.018 298.33 129.51 298.778 129.51 299.42C129.51 300.037 128.973 300.455 128.226 300.455C127.553 300.455 127.018 300.108 126.976 299.545H126.26C126.303 300.46 127.109 301.08 128.237 301.08ZM133.263 301.08C134.547 301.08 135.286 299.991 135.286 298.091C135.286 296.205 134.536 295.102 133.263 295.102C131.99 295.102 131.24 296.205 131.24 298.091C131.24 299.991 131.979 301.08 133.263 301.08ZM133.263 300.455C132.416 300.455 131.922 299.605 131.922 298.091C131.922 296.58 132.422 295.716 133.263 295.716C134.104 295.716 134.604 296.58 134.604 298.091C134.604 299.605 134.109 300.455 133.263 300.455ZM138.263 301.08C139.547 301.08 140.286 299.991 140.286 298.091C140.286 296.205 139.536 295.102 138.263 295.102C136.99 295.102 136.24 296.205 136.24 298.091C136.24 299.991 136.979 301.08 138.263 301.08ZM138.263 300.455C137.416 300.455 136.922 299.605 136.922 298.091C136.922 296.58 137.422 295.716 138.263 295.716C139.104 295.716 139.604 296.58 139.604 298.091C139.604 299.605 139.109 300.455 138.263 300.455ZM141.467 301H142.172V299.114L142.899 298.295L144.922 301H145.774L143.331 297.807L145.774 295.182H144.854L142.24 298.068H142.172V295.182H141.467V301Z" fill="#353D46" />
            <path id="text_6" d="M123.279 365.727H123.745V365.094C124.938 365.011 125.609 364.307 125.609 363.42C125.609 362.33 124.575 361.977 123.972 361.818L123.745 361.756V359.736C124.347 359.795 124.785 360.119 124.847 360.636H125.529C125.501 359.807 124.773 359.176 123.745 359.108V358.455H123.279V359.116C122.305 359.216 121.575 359.835 121.575 360.727C121.575 361.511 122.143 361.977 123.052 362.239L123.279 362.304V364.455C122.683 364.392 122.194 364.085 122.143 363.5H121.415C121.481 364.395 122.163 365.02 123.279 365.094V365.727ZM123.745 364.455V362.438L123.768 362.443C124.381 362.614 124.927 362.83 124.927 363.409C124.927 363.98 124.433 364.378 123.745 364.455ZM123.279 361.631C122.847 361.509 122.256 361.27 122.256 360.693C122.256 360.202 122.654 359.827 123.279 359.744V361.631ZM128.71 359.182H128.006L126.551 360.148V360.864L127.972 359.92H128.006V365H128.71V359.182ZM132.281 365.08C133.565 365.08 134.304 363.991 134.304 362.091C134.304 360.205 133.554 359.102 132.281 359.102C131.009 359.102 130.259 360.205 130.259 362.091C130.259 363.991 130.997 365.08 132.281 365.08ZM132.281 364.455C131.435 364.455 130.94 363.605 130.94 362.091C130.94 360.58 131.44 359.716 132.281 359.716C133.122 359.716 133.622 360.58 133.622 362.091C133.622 363.605 133.128 364.455 132.281 364.455ZM137.281 365.08C138.565 365.08 139.304 363.991 139.304 362.091C139.304 360.205 138.554 359.102 137.281 359.102C136.009 359.102 135.259 360.205 135.259 362.091C135.259 363.991 135.997 365.08 137.281 365.08ZM137.281 364.455C136.435 364.455 135.94 363.605 135.94 362.091C135.94 360.58 136.44 359.716 137.281 359.716C138.122 359.716 138.622 360.58 138.622 362.091C138.622 363.605 138.128 364.455 137.281 364.455ZM140.486 365H141.19V363.114L141.918 362.295L143.94 365H144.793L142.349 361.807L144.793 359.182H143.872L141.259 362.068H141.19V359.182H140.486V365Z" fill="#353D46" />
            <g id="Master">
              <g id="buttom row">
                <g id="Legend">
                  <circle id="color" cx="171" cy="446" r="2.5" stroke="#8C0DAF" stroke-width="5" />
                  <path id="Text" opacity="0.78" d="M182.879 450H187.941V448.961H184.086V446.512H187.633V445.477H184.086V443.039H187.895V442H182.879V450ZM190.581 446.437C190.581 445.48 191.167 444.934 191.979 444.934C192.772 444.934 193.253 445.453 193.253 446.324V450H194.421V446.184C194.421 444.699 193.604 443.922 192.378 443.922C191.476 443.922 190.886 444.34 190.608 444.977H190.534V444H189.413V450H190.581V446.437ZM198.503 452.375C200.03 452.375 201.21 451.676 201.21 450.133V444H200.065V444.973H199.979C199.772 444.602 199.358 443.922 198.241 443.922C196.792 443.922 195.726 445.066 195.726 446.977C195.726 448.891 196.815 449.91 198.233 449.91C199.335 449.91 199.761 449.289 199.972 448.906H200.046V450.086C200.046 451.027 199.401 451.434 198.515 451.434C197.542 451.434 197.163 450.945 196.956 450.602L195.952 451.016C196.269 451.75 197.069 452.375 198.503 452.375ZM198.491 448.941C197.448 448.941 196.905 448.141 196.905 446.961C196.905 445.809 197.437 444.914 198.491 444.914C199.511 444.914 200.058 445.746 200.058 446.961C200.058 448.199 199.499 448.941 198.491 448.941ZM202.776 450H203.944V444H202.776V450ZM203.366 443.074C203.769 443.074 204.104 442.762 204.104 442.379C204.104 441.996 203.769 441.68 203.366 441.68C202.96 441.68 202.628 441.996 202.628 442.379C202.628 442.762 202.96 443.074 203.366 443.074ZM206.684 446.437C206.684 445.48 207.27 444.934 208.082 444.934C208.875 444.934 209.355 445.453 209.355 446.324V450H210.523V446.184C210.523 444.699 209.707 443.922 208.48 443.922C207.578 443.922 206.988 444.34 206.711 444.977H206.637V444H205.516V450H206.684V446.437ZM214.676 450.121C215.984 450.121 216.91 449.477 217.176 448.5L216.07 448.301C215.859 448.867 215.352 449.156 214.687 449.156C213.688 449.156 213.016 448.508 212.984 447.352H217.25V446.937C217.25 444.77 215.953 443.922 214.594 443.922C212.922 443.922 211.82 445.195 211.82 447.039C211.82 448.902 212.906 450.121 214.676 450.121ZM212.988 446.477C213.035 445.625 213.652 444.887 214.602 444.887C215.508 444.887 216.102 445.559 216.105 446.477H212.988ZM221.132 450.121C222.44 450.121 223.366 449.477 223.632 448.5L222.526 448.301C222.315 448.867 221.808 449.156 221.144 449.156C220.144 449.156 219.472 448.508 219.44 447.352H223.706V446.937C223.706 444.77 222.409 443.922 221.05 443.922C219.378 443.922 218.276 445.195 218.276 447.039C218.276 448.902 219.362 450.121 221.132 450.121ZM219.444 446.477C219.491 445.625 220.108 444.887 221.058 444.887C221.964 444.887 222.558 445.559 222.562 446.477H219.444ZM225.002 450H226.17V446.336C226.17 445.551 226.775 444.984 227.604 444.984C227.846 444.984 228.119 445.027 228.213 445.055V443.937C228.096 443.922 227.865 443.91 227.717 443.91C227.014 443.91 226.412 444.309 226.193 444.953H226.131V444H225.002V450ZM229.224 450H230.392V444H229.224V450ZM229.813 443.074C230.216 443.074 230.552 442.762 230.552 442.379C230.552 441.996 230.216 441.68 229.813 441.68C229.407 441.68 229.075 441.996 229.075 442.379C229.075 442.762 229.407 443.074 229.813 443.074ZM233.131 446.437C233.131 445.48 233.717 444.934 234.529 444.934C235.322 444.934 235.803 445.453 235.803 446.324V450H236.971V446.184C236.971 444.699 236.154 443.922 234.928 443.922C234.025 443.922 233.436 444.34 233.158 444.977H233.084V444H231.963V450H233.131V446.437ZM241.053 452.375C242.58 452.375 243.76 451.676 243.76 450.133V444H242.615V444.973H242.529C242.322 444.602 241.908 443.922 240.791 443.922C239.342 443.922 238.275 445.066 238.275 446.977C238.275 448.891 239.365 449.91 240.783 449.91C241.885 449.91 242.311 449.289 242.521 448.906H242.596V450.086C242.596 451.027 241.951 451.434 241.064 451.434C240.092 451.434 239.713 450.945 239.506 450.602L238.502 451.016C238.818 451.75 239.619 452.375 241.053 452.375ZM241.041 448.941C239.998 448.941 239.455 448.141 239.455 446.961C239.455 445.809 239.986 444.914 241.041 444.914C242.061 444.914 242.607 445.746 242.607 446.961C242.607 448.199 242.049 448.941 241.041 448.941Z" fill="#353D46" />
                </g>
                <g id="Legend_2">
                  <circle id="color_2" cx="274.5" cy="446" r="2.5" stroke="#2671FF" stroke-width="5" />
                  <path id="Text_2" opacity="0.78" d="M286.379 450H287.586V447.188H289.227C291.082 447.188 292 446.066 292 444.59C292 443.117 291.09 442 289.23 442H286.379V450ZM287.586 446.164V443.035H289.102C290.297 443.035 290.785 443.684 290.785 444.59C290.785 445.496 290.297 446.164 289.117 446.164H287.586ZM293.321 450H294.489V446.336C294.489 445.551 295.095 444.984 295.923 444.984C296.165 444.984 296.438 445.027 296.532 445.055V443.937C296.415 443.9.........完整代码请登录后点击上方下载按钮下载查看

网友评论0