svg+css实现卡车行驶动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现卡车行驶动画效果代码，点击鼠标可实现卡车前轮飞起来加速效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  

  
<style>
/* Background  */
.bg-obj {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #df9aff;
  background: rgb(223,154,255);
background: radial-gradient(circle, rgba(223,154,255,1) 48%, rgba(178,121,204,1) 83%);
}

/* Car  */
.car-obj {
  position: absolute;
  top: calc(50% + 5px);
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50px 0;
  transition: all 0.4s ease;
}

/* Events  */
.car-obj.on {
  transform: translate(-50%, -50%) rotate(-25deg);
}

.road-object {
  width: 40%;
  height: 3px;
  background: rgba(0, 0, 0, 0.41);
  position: absolute;
  top: calc(50% + 52px);
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 8px 15px 1px #000000;
}

.streetlgiht {
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(100%, -50%);
  animation: moveBack 2s ease infinite;
}

.buildings {
  position: absolute;
  top: calc(50% - 50px);
  left: 50%;
  transform: translate(100%, -50%);
  animation: moveBack 4s ease infinite;
}

.canvas {
  width: 40%;
  height: 170px;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@keyframes moveBack {
  100% {
    transform: translate(-150%, -50%);
  }
}

#tfront {
  animation: frontwheelanim 1s ease infinite;
}

#tback {
  animation: backwheelanim 1s ease 0.2s infinite;
}

@keyframes frontwheelanim {
  80% {
    transform: matrix(4.0764314, 0, 0, 4.0764314, -254.34846, -309.01206);
  }
}

@keyframes backwheelanim {
  80% {
    transform: matrix(4.0764314, 0, 0, 4.0764314, -278.31911, -308.68738);
  }
}


@media screen and (max-width: 600px) {
  body {
    background:#000000;
  }
}

@media screen and (min-width: 1620px) {
  .canvas {
    width: 500px;
  }
  .road-object {
    width: 500px;
  }
}
</style>

 


</head>

<body  >
  <!-- Added SVG for base images  -->

<div class="bg-obj">
  <div class="canvas">
    <div class="buildings">

      <svg width="793.70081" height="205" viewBox="0 0 210 54.239584" version="1.1" id="svg48026">

        <defs id="defs48023" />
        <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
          <g id="g51584" transform="translate(-6.3622202,-243.49951)">
            <g id="g51074">
              <g id="g50732" transform="matrix(1.0952269,0,0,1.3788085,6.791161,-112.4593)">
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50710" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g50720">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50712" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50714" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50716" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50718" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50730" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50722" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50724" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50726" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50728" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50734" width="15.031741" height="31.309727" x="76.849411" y="265.41833" />
                <g id="g50744" transform="translate(47.237556,-0.14830885)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50736" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50738" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50740" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50742" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50754" transform="translate(53.587555,-0.14830885)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50746" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50748" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50750" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50752" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.769673;stroke-linecap:round" id="rect49510" width="20.960173" height="49.384216" x="7.0548878" y="247.63676" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect49875" width="4.2942786" height="39.977699" x="9.1840849" y="254.25218" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect49877" width="4.2942786" height="39.977699" x="15.403072" y="254.14995" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect49879" width="4.2942786" height="39.977699" x="21.248964" y="254.14995" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect50607" width="4.2942786" height="39.977699" x="15.403072" y="254.14995" />
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.144426;stroke-linecap:round" id="rect50609" width="11.706035" height="3.1135249" x="11.681956" y="244.52797" />
              <g id="g50708">
                <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50611" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g50685">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50613" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50623" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50625" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50627" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50695" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50687" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50689" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50691" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50693" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.769673;stroke-linecap:round" id="rect50756" width="20.960173" height="49.384216" x="58.790733" y="247.43228" />
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.144426;stroke-linecap:round" id="rect50766" width="11.706035" height="3.1135249" x="63.417801" y="244.32349" />
              <g id="g50790" transform="translate(51.735843,-0.2044895)">
                <g id="g50802" transform="translate(-19.737342,-19.665044)">
                  <g id="g50778">
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50770" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50772" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50774" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50776" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                  </g>
                  <g id="g50788" transform="translate(6.3499991)">
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50780" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50782" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50784" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50786" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                  </g>
                </g>
              </g>
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.229317;stroke-linecap:round" id="rect50804" width="4.2942786" height="21.397125" x="63.479851" y="275.43549" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.229317;stroke-linecap:round" id="rect50806" width="4.2942786" height="21.397125" x="70.20356" y="275.50778" />
              <g id="g50852" transform="matrix(1.0952269,0,0,1.3788085,6.791161,-112.4593)">
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50808" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g50818">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50810" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50812" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50814" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50816" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50828" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50820" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50822" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50824" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50826" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50830" width="15.031741" height="31.309727" x="76.849411" y="265.41833" />
                <g id="g50840" transform="translate(47.237556,-0.14830885)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50832" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50834" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50836" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50838" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50850" transform="translate(53.587555,-0.14830885)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50842" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50844" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50846" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50848" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.769673;stroke-linecap:round" id="rect50854" width="20.960173" height="49.384216" x="7.0548878" y="247.63676" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect50856" width="4.2942786" height="39.977699" x="9.1840849" y="254.25218" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect50858" width="4.2942786" height="39.977699" x="15.403072" y="254.14995" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect50860" width="4.2942786" height="39.977699" x="21.248964" y="254.14995" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect50862" width="4.2942786" height="39.977699" x="15.403072" y="254.14995" />
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.144426;stroke-linecap:round" id="rect50864" width="11.706035" height="3.1135249" x="11.681956" y="244.52797" />
              <g id="g50888">
                <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50866" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g50876">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50868" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50870" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50872" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50874" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50886" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50878" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50880" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50882" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50884" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.769673;stroke-linecap:round" id="rect50890" width="20.960173" height="49.384216" x="58.790733" y="247.43228" />
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.144426;stroke-linecap:round" id="rect50892" width="11.706035" height="3.1135249" x="63.417801" y="244.32349" />
              <g id="g50918" transform="translate(51.735843,-0.2044895)">
                <g id="g50916" transform="translate(-19.737342,-19.665044)">
                  <g id="g50904">
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50896" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50898" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50900" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50902" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                  </g>
                  <g id="g50914" transform="translate(6.3499991)">
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50906" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50908" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50910" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50912" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                  </g>
                </g>
              </g>
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.229317;stroke-linecap:round" id="rect50920" width="4.2942786" height="21.397125" x="63.479851" y="275.43549" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.229317;stroke-linecap:round" id="rect50922" width="4.2942786" height="21.397125" x="70.20356" y="275.50778" />
              <g id="g50946" transform="translate(53.35589)">
                <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect50924" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g50934">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50926" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50928" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50930" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50932" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g50944" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50936" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50938" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50940" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect50942" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
            </g>
            <g id="g51328" transform="translate(102.5185,-0.28919182)">
              <g id="g51120" transform="matrix(1.0952269,0,0,1.3788085,6.791161,-112.4593)">
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect51076" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g51086">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51078" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51080" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51082" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51084" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g51096" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51088" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51090" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51092" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51094" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect51098" width="15.031741" height="31.309727" x="76.849411" y="265.41833" />
                <g id="g51108" transform="translate(47.237556,-0.14830885)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51100" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51102" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51104" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51106" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g51118" transform="translate(53.587555,-0.14830885)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51110" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51112" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51114" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51116" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.769673;stroke-linecap:round" id="rect51122" width="20.960173" height="49.384216" x="7.0548878" y="247.63676" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect51124" width="4.2942786" height="39.977699" x="9.1840849" y="254.25218" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect51126" width="4.2942786" height="39.977699" x="15.403072" y="254.14995" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect51128" width="4.2942786" height="39.977699" x="21.248964" y="254.14995" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.31345;stroke-linecap:round" id="rect51130" width="4.2942786" height="39.977699" x="15.403072" y="254.14995" />
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.144426;stroke-linecap:round" id="rect51132" width="11.706035" height="3.1135249" x="11.681956" y="244.52797" />
              <g id="g51156">
                <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect51134" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g51144">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51136" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51138" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51140" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51142" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g51154" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51146" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51148" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51150" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51152" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
              </g>
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.769673;stroke-linecap:round" id="rect51158" width="20.960173" height="49.384216" x="58.790733" y="247.43228" />
              <rect style="fill:#de99ff;fill-opacity:1;stroke-width:0.144426;stroke-linecap:round" id="rect51160" width="11.706035" height="3.1135249" x="63.417801" y="244.32349" />
              <g id="g51184" transform="translate(51.735843,-0.2044895)">
                <g id="g51182" transform="translate(-19.737342,-19.665044)">
                  <g id="g51170">
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51162" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51164" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51166" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51168" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                  </g>
                  <g id="g51180" transform="translate(6.3499991)">
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51172" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51174" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51176" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                    <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51178" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                  </g>
                </g>
              </g>
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.229317;stroke-linecap:round" id="rect51186" width="4.2942786" height="21.397125" x="63.479851" y="275.43549" />
              <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.229317;stroke-linecap:round" id="rect51188" width="4.2942786" height="21.397125" x="70.20356" y="275.50778" />
              <g id="g51234" transform="matrix(1.0952269,0,0,1.3788085,6.791161,-112.4593)">
                <rect style="fill:#deb5ff;fill-opacity:1;stroke-width:0.518991;stroke-linecap:round" id="rect51190" width="15.031741" height="31.309727" x="29.611851" y="265.56665" />
                <g id="g51200">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51192" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51194" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51196" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51198" width="4.2942786" height="3.8287218" x="31.741047" y="270.78232" />
                </g>
                <g id="g51210" transform="translate(6.3499991)">
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51202" width="4.2942786" height="3.8287218" x="31.741047" y="290.25656" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51204" width="4.2942786" height="3.8287218" x="31.741047" y="283.74976" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id="rect51206" width="4.2942786" height="3.8287218" x="31.741047" y="277.53214" />
                  <rect style="fill:#ce8eed;fill-opacity:1;stroke-width:0.0970033;stroke-linecap:round" id=".........完整代码请登录后点击上方下载按钮下载查看