密码强度检测器

代码语言:html

所属分类:表单美化

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
body {
  font-family: "Playfair Display", serif;
}

h1 {
  color: #f7c926;
  text-align: center;
  font-size: 27px;
}

#wrapper {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background-color: #151414;
}

#box {
  max-width: 750px;
  width: 100%;
}

.pass-wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  margin: 0 0 20px 0;
}

#svg {
  width: 300px;
  height: 300px;
  display: block;
  padding: 20px;
}

#input-wrapper {
  position: relative;
  height: 40px;
}
#input-wrapper label {
  display: block;
  width: 100%;
  pointer-events: none;
  color: #f7c926;
  position: absolute;
  bottom: 10px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  font-size: 18px;
  opacity: 1;
  left: 10px;
}
#input-wrapper #pwd:valid + label, #input-wrapper #pwd:focus + label {
  bottom: 35px;
  font-size: 14px;
  opacity: 0;
}

#pwd {
  overflow: hidden;
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: rgba(247, 201, 38, 0.2);
  caret-color: #FFFFFF;
  font-size: 25px;
  color: #f7c926;
  border-radius: 7px;
  padding: 5px 10px;
  box-sizing: border-box;
  line-height: 40px;
  height: 100%;
  border: 3px solid #f7c926;
}

.levels-container {
  width: 60%;
  box-sizing: border-box;
  padding: 10px;
  margin: 10px 0 0 0;
  border-radius: 7px;
  pointer-events: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
}
.levels-container .level-line {
  margin: 15px 0;
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  color: rgba(255, 255, 255, 0);
}
.levels-container .level-line .line-label {
  width: 30%;
  color: #f7c926;
  padding: 0 20px 0 0;
  text-align: center;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.levels-container .level-line .line-progression {
  width: 50%;
  position: relative;
  height: 5px;
  -webkit-animation: glowBar 0.6s ease-in-out infinite alternate;
          animation: glowBar 0.6s ease-in-out infinite alternate;
}
.levels-container .level-line .line-progression:before, .levels-container .level-line .line-progression:after {
  content: '';
  display: block;
  height: 5px;
  position: absolute;
  border-radius: 2px;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.levels-container .level-line .line-progression:before {
  background-color: rgba(247, 201, 38, 0.2);
  width: 100%;
}
.levels-container .level-line .line-progression:after {
  -webkit-transition-duration: 0.9s;
          transition-duration: 0.9s;
  background-color: #f7c926;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  border-style: solid;
  border-width: 0px;
}

[data-level="0"] .line-progression:after {
  width: 2%;
  border-width: 0px;
}

[data-level="1"] .line-progression:after {
  width: 33%;
  -webkit-animation-name: pulse1;
          animation-name: pulse1;
  border-color: rgba(255, 255, 255, 0.3);
  border-width: 1px;
}

[data-level="2"] .line-progression:after {
  width: 66%;
  -webkit-animation-name: pulse2;
          animation-name: pulse2;
  border-color: rgba(255, 255, 255, 0.6);
  border-width: 1px;
}

[data-level="3"] {
  color: #f7c926 !important;
}
[data-level="3"] .line-label {
  -webkit-animation: glow 0.6s ease-in-out infinite alternate;
          animation: glow 0.6s ease-in-out infinite alternate;
  color: #FFFFFF !important;
}
[data-level="3"] .line-progression:after {
  width: 100%;
  -webkit-animation-name: pulse3;
          animation-name: pulse3;
  border-color: white;
  border-width: 1px !important;
  -webkit-animation-duration: 2s !important;
          animation-duration: 2s !important;
  color: #FFFFFF;
}

@-webkit-keyframes pulse1 {
  0% {
    box-shadow: 0px 0px 0px 0px white;
  }
  50% {
    box-shadow: 0px 0px 30px 0px white;
  }
  100% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }
}

@keyframes pulse1 {
  0% {
    box-shadow: 0px 0px 0px 0px white;
  }
  50% {
    box-shadow: 0px 0px 30px 0px white;
  }
  100% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }
}
@-webkit-keyframes pulse2 {
  0% {
    box-shadow: 0px 0px 0px 0px white;
  }
  50% {
    box-shadow: 0px 0px 30px 5px white;
  }
  100% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }
}
@keyframes pulse2 {
  0% {
    box-shadow: 0px 0px 0px 0px white;
  }
  50% {
    box-shadow: 0px 0px 30px 5px white;
  }
  100% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
  }
}
@-webkit-keyframes pulse3 {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0px 0px 6px 10px rgba(255, 255, 255, 0);
  }
}
@keyframes pulse3 {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0px 0px 6px 10px rgba(255, 255, 255, 0);
  }
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #f7c926, 0 0 10px #f7c926, 0 0 15px #f7c926, 0 0 30px #f7c926, 0 0 45px #f7c926, 0 0 60px #f7c926, 0 0 75px #f7c926;
  }
  to {
    text-shadow: 0 0 10px #f7c926, 0 0 15px #f7c926, 0 0 20px #f7c926, 0 0 25px #f7c926, 0 0 30px #f7c926, 0 0 35px #f7c926, 0 0 40px #f7c926;
  }
}
@keyframes glow {
  from {
    text-shadow: 0 0 5px #f7c926, 0 0 10px #f7c926, 0 0 15px #f7c926, 0 0 30px #f7c926, 0 0 45px #f7c926, 0 0 60px #f7c926, 0 0 75px #f7c926;
  }
  to {
    text-shadow: 0 0 10px #f7c926, 0 0 15px #f7c926, 0 0 20px #f7c926, 0 0 25px #f7c926, 0 0 30px #f7c926, 0 0 35px #f7c926, 0 0 40px #f7c926;
  }
}
@-webkit-keyframes glowBar {
  from {
    box-shadow: 0 0 5px currentColor,  0 0 10px currentColor,  0 0 15px currentColor,  0 0 30px currentColor,  0 0 45px currentColor,  0 0 60px currentColor,  0 0 75px currentColor;
  }
  to {
    box-shadow: 0 0 10px currentColor,  0 0 15px currentColor,  0 0 20px currentColor,  0 0 25px currentColor,  0 0 30px currentColor,  0 0 35px currentColor,  0 0 40px currentColor;
  }
}
@keyframes glowBar {
  from {
    box-shadow: 0 0 5px currentColor,  0 0 10px currentColor,  0 0 15px currentColor,  0 0 30px currentColor,  0 0 45px currentColor,  0 0 60px currentColor,  0 0 75px currentColor;
  }
  to {
    box-shadow: 0 0 10px currentColor,  0 0 15px currentColor,  0 0 20px currentColor,  0 0 25px currentColor,  0 0 30px currentColor,  0 0 35px currentColor,  0 0 40px currentColor;
  }
}
</style>

</head>
<body translate="no">
<div id="wrapper">
<div id="box">
<div class="side">
<h1>Build your (strong) password here:</h1>
</div>
<div class="pass-wrapper">
<svg id="svg" viewBox="0 0 105.83333 105.83334">
</svg>
 <div class="levels-container">
<div data-carac="length" data-level="0" class="level-line">
<div class="line-label">Length</div>
<div class="line-progression"></div>
</div>
<div data-carac="uppercases" data-level="0" class="level-line">
<div class="line-label">Capitals</div>
<div class="line-progression"></div>
</div>
<div data-carac="specials" data-level="0" class="level-line">
<div class="line-label">Specials</div>
<div class="line-progression"></div>
</div>
<div data-carac="numbers" data-level="0" class="level-line">
<div class="line-label">Numbers</div>
<div class="line-progression"></div>
</div>
</div>
</div>
<div class="side">
<div id="input-wrapper">
<input required id="pwd" type="text">
<label>type here...</label>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script>
<script >
console.clear();

var s = Snap("#svg");

const config = {
  strokeColor: '#734b00',
  fillShield: '#734b00',
  strokeDarkColor: '#f7c926',
  fillColor: '#f7c926',
  shadow: s.filter(Snap.filter.shadow(0, 0, 2, '#ffffff', 0.3)),
  strengthSteps: {
    length: [0, 6, 10, 16],
    specials: [0, 2, 4, 6],
    numbers: [0, 2, 4, 6],
    uppercases: [0, 2, 4, 6] } };



class Draw {

  constructor(strokeColor, fillColor, strokeDarkColor, fillShield, shadow) {
    this.fillShield = fillShield;
    this.strokeColor = strokeColor;
    this.fillColor = fillColor;
    this.strokeDarkColor = strokeDarkColor;
    this.shadow = shadow;
  }

  paths() {
    return [
    {
      carac: 'length',
      assets: [
      {
        name: 'bottom',
        d: [
        'm 72.14003,45.15249 c 0,13.877381 -10.724779,19.316905 -19.223361,19.316905 -8.498581,0 -19.316904,-6.094333 -19.316905,-19.316905 0,-3.234958 1.085259,-6.259258 2.875019,-8.859952 3.636686,-5.284453 10.182098,-8.819929 16.441886,-8.819929 6.570104,0 12.136766,3.260981 15.562475,7.694994 2.322444,3.006021 3.660886,6.551179 3.660886,9.984887 z',
        'm 72.14003,45.15249 c 0,13.877381 -10.724779,19.316905 -19.223361,19.316905 -8.498581,0 -19.316904,-6.094333 -19.316905,-19.316905 0,-3.234958 1.085259,-6.259258 2.875019,-8.859952 3.636686,-5.284453 10.182098,-8.819929 16.441886,-8.819929 6.570104,0 12.136766,3.260981 15.562475,7.694994 2.322444,3.006021 3.660886,6.551179 3.660886,9.984887 z',
        'M 72.093257,49.268441 C 71.812624,56.363857 59.681098,64.35007 52.91667,69.761061 44.297089,61.521298 33.927171,55.615505 33.92717,49.970024 c 0,-3.234957 -1.259041,-7.455632 -0.1184,-12.92913 3.011528,-4.818689 12.848112,-9.100562 19.1079,-9.100562 6.570103,0 15.619415,4.259014 19.444565,9.612653 0.831729,4.044017 -0.132275,8.284432 -0.267978,11.715456 z',
        'M 72.887008,55.188494 C 72.606375,62.28391 57.928234,70.766216 52.916671,81.931895 49.401075,71.821195 33.166494,61.039463 33.166493,55.393983 c 0,-3.234957 -1.993408,-12.66746 -0.852767,-18.140958 8.137831,-1.346033 12.532635,-5.710059 20.602945,-10.800974 4.496523,3.491872 15.555576,9.283791 20.869007,10.668681 0.831729,4.044017 -0.762968,14.636738 -0.89867,18.067762 z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.fillColor } },


      {
        name: 'innerShields',
        d: [
        'm 52.916667,41.173197 c -2.686481,0 -4.864303,2.177822 -4.864303,4.864304 0,2.686481 2.177822,4.864304 4.864303,4.864304 2.686482,0 4.864304,-2.177823 4.864304,-4.864304 0,-2.686482 -2.177822,-4.864304 -4.864304,-4.864304 z',
        'm 52.916668,39.651843 c -3.526703,0 -6.385658,2.858955 -6.385658,6.385658 0,3.526702 2.858955,6.385658 6.385658,6.385658 3.526702,0 6.385658,-2.858956 6.385658,-6.385658 0,-3.526703 -2.858956,-6.385658 -6.385658,-6.385658 z',
        'm 52.916668,39.651843 c -1.083123,2.760676 -2.646934,5.230696 -6.385658,6.385658 5.100693,0.732549 5.156739,3.834548 6.385658,6.385658 1.228918,-2.55111 1.284964,-5.653109 6.385658,-6.385658 -3.738724,-1.154962 -5.302536,-3.624982 -6.385658,-6.385658 z',
        'm 52.916667,39.651843 c -0.463021,1.543063 -3.492788,2.741715 -8.209835,2.913001 5.100693,0.732549 7.214777,7.205398 8.209835,14.620814 0.995059,-7.415416 3.109143,-13.888265 8.209836,-14.620814 -4.717047,-0.171286 -7.746815,-1.369938 -8.209836,-2.913001 z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.fillShield,
          'filter': this.shadow } },


      {
        name: 'borderLeft',
        d: [
        'm 52.845941,45.373976 c -0.08425,0.0086 -0.167157,0.03229 -0.244375,0.06816 a 0.07596396,0.07596396 0 0 1 0.0043,0.02499 0.07596396,0.07596396 0 0 1 -0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.05711,-0.026 c -0.04931,0.03523 -0.09443,0.07577 -0.133522,0.120834 a 0.07596396,0.07596396 0 0 1 0.02479,0.05602 0.07596396,0.07596396 0 0 1 -0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.03456,-0.0084 c -0.03313,0.06161 -0.05585,0.128247 -0.06552,0.198135 a 0.07596396,0.07596396 0 0 1 0.06904,0.07561 0.07596396,0.07596396 0 0 1 -0.06904,0.0756 c 0.01011,0.0731 0.03455,0.1426 0.0702,0.20656 a 0.07596396,0.07596396 0 0 1 0.02987,-0.0061 0.07596396,0.07596396 0 0 1 0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.01971,0.05094 c 0.03958,0.04467 0.08503,0.08483 0.134675,0.119596 a 0.07596396,0.07596396 0 0 1 0.05087,-0.01968 0.07596396,0.07596396 0 0 1 0.07596,0.07596 0.07596396,0.07596396 0 0 1 -0.0017,0.01555 c 0.076,0.03498 0.157456,0.05817 0.240231,0.06675 a 0.07596396,0.07596396 0 0 1 0.07173,-0.05127 v -0.01434 c -0.298777,0 -0.629695,-0.247532 -0.629695,-0.595525 0,-0.347993 0.350177,-0.595458 0.629695,-0.595458 v -0.01866 a 0.07596396,0.07596396 0 0 1 -0.07021,-0.04714 z',
        'm 50.74574,25.596372 c -2.604452,0.264479 -5.167111,0.998151 -7.55406,2.106848 a 2.3481772,2.3481772 0 0 1 0.133842,0.772562 2.3481772,2.3481772 0 0 1 -2.348177,2.348177 2.3481772,2.3481772 0 0 1 -1.765269,-0.803568 c -1.524323,1.088911 -2.918851,2.342274 -4.127394,3.735173 a 2.3481772,2.3481772 0 0 1 0.76636,1.731677 2.3481772,2.3481772 0 0 1 -2.348177,2.348177 2.3481772,2.3481772 0 0 1 -1.068152,-0.259416 c -1.024242,1.904569 -1.726533,3.96435 -2.0252,6.124692 a 2.3481772,2.3481772 0 0 1 2.134238,2.337324 2.3481772,2.3481772 0 0 1 -2.134238,2.336808 c 0.312505,2.259494 1.068009,4.408021 2.169895,6.385141 a 2.3481772,2.3481772 0 0 1 0.923457,-0.189653 2.3481772,2.3481772 0 0 1 2.348177,2.348177 2.3481772,2.3481772 0 0 1 -0.609264,1.57458 c 1.223426,1.380911 2.628371,2.622418 4.163052,3.696933 a 2.3481772,2.3481772 0 0 1 1.572515,-0.608232 2.3481772,2.3481772 0 0 1 2.348177,2.348177 2.3481772,2.3481772 0 0 1 -0.05271,0.480592 c 2.349416,1.081149 4.867191,1.79799 7.425905,2.063438 a 2.3481772,2.3481772 0 0 1 2.217436,-1.584915 v -0.443383 c -9.235705,0 -19.464963,-7.651645 -19.464963,-18.408695 0,-10.757062 10.824573,-18.40663 19.464963,-18.40663 V 27.053647 A 2.3481772,2.3481772 0 0 1 50.74574,25.596372 Z',
        'm 51.208762,25.563299 v 0 l -9.239229,4.764567 v 0 l -1.732196,-1.795759 v 0 L 33.1556,36.892839 v 0 l -2.473751,-0.09405 v 0 l 1.332736,9.23923 -2.411739,1.412834 v 0 0 0 0 l 10.397298,12.126391 v 0 0 0 0 c -2.531455,-2.97329 -4.969033,-6.002907 -5.770188,-10.014376 v 0 L 33.881139,38.03334 c 0,0 4.314938,-8.522091 19.035015,-10.006109 v 0 z',
        'm 53.082716,25.759672 -2.000911,-1.918229 v 0 0 0 c -7.487809,5.898 -15.710544,9.874927 -22.568151,11.070694 v 0 0 0 0 0 0 0 0 0 c 0.06178,11.71776 -0.845587,22.170469 9.455858,30.66696 10.301445,8.496493 12.591226,12.245102 15.062911,17.33419 v 0 0 h 0.0321 v 0 C 51.917597,78.176206 45.894094,70.226966 38.959897,64.478758 34.790734,61.022665 32.285046,55.368508 32.292869,49.924321 l 0.0184,-12.80359 C 42.647761,34.573025 51.598903,27.432706 52.387501,26.737388 l 0.529167,-0.529167 z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor } },


      {
        name: 'borderRight',
        d: [
        'm 52.986366,45.373976 c 0.08426,0.0086 0.167158,0.03229 0.244377,0.06816 a 0.07596396,0.07596396 0 0 0 -0.0043,0.02499 0.07596396,0.07596396 0 0 0 0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.05711,-0.026 c 0.04931,0.03523 0.09443,0.07577 0.133522,0.120834 a 0.07596396,0.07596396 0 0 0 -0.02479,0.05602 0.07596396,0.07596396 0 0 0 0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.03455,-0.0084 c 0.03314,0.06161 0.05585,0.128247 0.06552,0.198135 a 0.07596396,0.07596396 0 0 0 -0.06904,0.07561 0.07596396,0.07596396 0 0 0 0.06904,0.0756 c -0.01011,0.0731 -0.03455,0.1426 -0.0702,0.20656 a 0.07596396,0.07596396 0 0 0 -0.02987,-0.0061 0.07596396,0.07596396 0 0 0 -0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.01971,0.05094 c -0.03958,0.04467 -0.08503,0.08483 -0.134675,0.119596 a 0.07596396,0.07596396 0 0 0 -0.05087,-0.01968 0.07596396,0.07596396 0 0 0 -0.07596,0.07596 0.07596396,0.07596396 0 0 0 0.0017,0.01555 c -0.076,0.03498 -0.157457,0.05817 -0.240232,0.06675 a 0.07596396,0.07596396 0 0 0 -0.07173,-0.05127 v -0.01434 c 0.298777,0 0.629695,-0.247532 0.629695,-0.595525 0,-0.347993 -0.350177,-0.595458 -0.629695,-0.595458 v -0.01866 a 0.07596396,0.07596396 0 0 0 0.07021,-0.04714 z',
        'm 55.086566,25.596372 c 2.604452,0.264479 5.167111,0.998151 7.55406,2.106848 a 2.3481772,2.3481772 0 0 0 -0.133842,0.772562 2.3481772,2.3481772 0 0 0 2.348177,2.348177 2.3481772,2.3481772 0 0 0 1.765269,-0.803568 c 1.524323,1.088911 2.918851,2.342274 4.127394,3.735173 a 2.3481772,2.3481772 0 0 0 -0.76636,1.731677 2.3481772,2.3481772 0 0 0 2.348177,2.348177 2.3481772,2.3481772 0 0 0 1.068152,-0.259416 c 1.024242,1.904569 1.726533,3.96435 2.0252,6.124692 a 2.3481772,2.3481772 0 0 0 -2.134238,2.337324 2.3481772,2.3481772 0 0 0 2.134238,2.336808 c -0.312505,2.259494 -1.068009,4.408021 -2.169895,6.385141 a 2.3481772,2.3481772 0 0 0 -0.923457,-0.189653 2.3481772,2.3481772 0 0 0 -2.348177,2.348177 2.3481772,2.3481772 0 0 0 0.609264,1.57458 c -1.223426,1.380911 -2.628371,2.622418 -4.163052,3.696933 a 2.3481772,2.3481772 0 0 0 -1.572515,-0.608232 2.3481772,2.3481772 0 0 0 -2.348177,2.348177 2.3481772,2.3481772 0 0 0 0.05271,0.480592 c -2.349416,1.081149 -4.867191,1.79799 -7.425905,2.063438 a 2.3481772,2.3481772 0 0 0 -2.217436,-1.584915 v -0.443383 c 9.235705,0 19.464963,-7.651645 19.464963,-18.408695 0,-10.757062 -10.824573,-18.40663 -19.464963,-18.40663 v -0.576709 a 2.3481772,2.3481772 0 0 0 2.170413,-1.457275 z',
        'm 54.623546,25.563299 v 0 l 9.239229,4.764567 v 0 l 1.732196,-1.79576 v 0 l 7.081737,8.360733 v 0 l 2.473751,-0.09405 v 0 l -1.332736,9.23923 2.411739,1.412834 v 0 0 0 0 L 65.832164,59.577244 v 0 0 0 0 c 2.531455,-2.97329 4.969033,-6.002907 5.770188,-10.014376 v 0 L 71.951169,38.03334 c 0,0 -4.314938,-8.522091 -19.035015,-10.006109 v 0 z',
        'm 53.082715,25.759672 2.000911,-1.918229 v 0 0 0 c 7.487809,5.898 15.710544,9.874927 22.568151,11.070694 v 0 0 0 0 0 0 0 0 0 c -0.06178,11.71776 0.845587,22.170469 -9.455858,30.66696 -10.301445,8.496493 -12.591226,12.245102 -15.062911,17.33419 v 0 0 h -0.0321 v 0 c 1.146926,-4.737081 7.170429,-12.686321 14.104626,-18.434529 4.169163,-3.456093 6.674851,-9.11025 6.667028,-14.554437 l -0.0184,-12.80359 C 63.51767,34.573025 54.566528,27.432706 53.77793,26.737388 l -0.529167,-0.529167 z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor } },


      {
        name: 'innerShieldStroke',
        d: [
        'm 52.916668,42.881465 c -1.743032,0 -3.156036,1.413004 -3.156036,3.156037 0,1.743031 1.413004,3.156036 3.156036,3.156036 1.743032,0 3.156036,-1.413005 3.156036,-3.156036 0,-1.743033 -1.413004,-3.156037 -3.156036,-3.156037 z',
        'm 52.916669,42.061857 c -2.19569,0 -3.975645,1.779955 -3.975645,3.975646 0,2.195689 1.779955,3.975645 3.975645,3.975645 2.19569,0 3.975645,-1.779956 3.975645,-3.975645 0,-2.195691 -1.779955,-3.975646 -3.975645,-3.975646 z',
        'm 52.916667,42.591201 c -0.465714,1.562306 -1.896793,2.770579 -3.446301,3.446301 1.623602,0.498909 2.785896,1.598687 3.446301,3.446301 0.660405,-1.847614 1.822699,-2.947392 3.446301,-3.446301 -1.549508,-0.675722 -2.980587,-1.883995 -3.446301,-3.446301 z',
        'm 52.916667,41.310658 c -0.257984,0.970648 -2.593655,1.732489 -4.213696,1.915645 1.772608,1.124431 3.934019,5.538044 4.213696,8.579321 0.279678,-3.041277 2.441089,-7.45489 4.213696,-8.579321 -1.620041,-0.183156 -3.955711,-0.944997 -4.213696,-1.915645 z'],

        attrs: {
          'stroke-width': '1px',
          'stroke': this.strokeDarkColor,
          'fill': 'none' } },


      {
        name: 'topLeftDetail',
        d: [
        'm 35.406532,38.645117 0.865285,-1.847501 -0.327406,9.963375 z',
        'm 35.406532,38.645117 0.865285,-1.847501 -0.327406,9.963375 z',
        'm 36.618188,38.58092 c 3.003644,-3.113858 6.673938,-5.239242 9.939087,-6.711807 -5.072674,3.346977 -9.416189,6.080527 -9.939087,15.950213 z',
        'm 34.736413,40.16842 c 7.096209,-3.207403 10.298781,-3.99978 15.17757,-8.302061 -5.470238,6.223466 -14.654672,6.083281 -15.17757,15.952967 z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor } },


      {
        name: 'topRightDetail',
        d: [
        'm 69.971165,37.966918 0.780452,1.590255 -0.359503,6.35 z',
        'm 69.971165,37.966918 0.780452,1.590255 -0.359503,6.35 z',
        'm 69.215146,38.58092 c -3.003645,-3.113858 -6.673938,-5.239242 -9.93909,-6.711807 5.072675,3.346977 9.416189,6.080527 9.93909,15.950213 z',
        'M 71.096921,40.16842 C 64.000711,36.961017 60.798138,36.16864 55.91935,31.866359 61.389586,38.089825 70.57402,37.94964 71.096921,47.819326 Z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor } },


      {
        name: 'bottomRightDetail',
        d: [
        'M 65.99553,59.482116 67.258379,58.4999 66.65034,46.796789 Z',
        'M 65.99553,59.482115 67.258379,58.4999 66.65034,46.796789 Z',
        'm 58.916112,61.63473 c 3.651272,-2.320821 6.467222,-5.492371 8.562561,-8.397402 -3.267882,3.805442 -5.822075,6.456771 -9.478696,6.452072 z',
        'm 56.432261,71.821194 c 2.923669,-2.816915 10.469046,-9.394978 13.192767,-15.243498 -2.044184,3.342421 -7.674157,9.995575 -11.330777,9.990876 z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor } },


      {
        name: 'bottomLeftDetail',
        d: [
        'm 39.911334,59.356473 0.69562,0.690435 -0.265959,-10.66573 z',
        'm 39.911334,59.356472 0.69562,0.690436 -0.265959,-10.66573 z',
        'm 46.917223,61.63473 c -3.651272,-2.320821 -6.467222,-5.492371 -8.56256,-8.397402 3.267882,3.805442 5.822074,6.456771 9.478695,6.452072 z',
        'M 49.401074,71.821194 C 46.477406,69.004279 38.932029,62.426216 36.208306,56.577696 c 2.044184,3.342421 7.674157,9.995575 11.330778,9.990876 z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor } },


      {
        name: 'topDetails',
        d: [
        'm 55.249859,27.665495 -1.62574,0.175183 -4.209564,0.163815 -4.127397,1.016992 -2.443779,1.216464 -0.912087,0.783413 0.128674,0.362251 0.169498,-0.137974 0.286287,7.254337 0.186036,-7.637777 0.854729,-0.694531 1.289844,-0.661974 v 33.068265 h 0.265615 V 29.369266 l 0.315743,-0.172082 1.005107,-0.210323 0.179835,-0.04909 0.463537,12.196157 0.763778,-12.531535 1.762167,-0.481108 3.53105,-0.140044 0.499711,-0.0057 0.552421,8.495605 0.765328,-8.509559 0.3576,-0.0041 0.958599,0.187069 2.86494,0.689879 1.589569,0.671278 v 33.068266 h 0.265616 V 29.617832 l 0.471807,0.198953 0.757576,0.352949 0.411343,8.780344 0.629936,-8.295101 0.609782,0.284221 0.140044,-0.104905 -0.919324,-0.411861 -0.881083,-0.453718 0.0031,0.06098 -1.223182,-0.547772 v -0.112654 h -0.252184 l -1.638144,-0.733287 z',
        'm 55.249859,27.665495 -1.625741,0.175183 -4.209563,0.163815 -4.127397,1.016992 -2.443779,1.216464 -0.912088,0.783413 0.128675,0.362251 0.169498,-0.137974 0.286287,7.254337 0.186036,-7.637777 0.854729,-0.694531 1.289844,-0.661974 v 33.068265 h 0.265615 V 29.369266 l 0.315743,-0.172082 1.005107,-0.210323 0.179835,-0.04909 0.463537,12.196157 0.763778,-12.531535 1.762167,-0.481108 3.53105,-0.140044 0.499711,-0.0057 0.552421,8.495605 0.765328,-8.509559 0.3576,-0.0041 0.958599,0.187069 2.86494,0.689879 1.589569,0.671278 v 33.068266 h 0.265615 V 29.617832 l 0.471808,0.198953 0.757576,0.352949 0.411343,8.780344 0.629936,-8.295101 0.609782,0.284221 0.140044,-0.104905 -0.919324,-0.411861 -0.881083,-0.453718 0.0031,0.06098 -1.223182,-0.547772 v -0.112654 h -0.25218 l -1.638149,-0.733287 z',
        'm 55.249859,27.665495 -1.625741,0.175183 -4.209563,0.163815 -4.127397,1.372526 -2.443779,1.166855 -0.912088,0.477488 0.128675,0.362251 0.169498,-0.137973 0.286287,-0.153997 0.186036,-0.229443 0.854729,-0.388607 1.289844,-0.686779 v -0.02119 h 0.265615 v -0.115239 l 0.315743,-0.09767 1.005107,-0.408761 0.179835,-0.04909 0.463537,-0.131773 0.763778,-0.203605 1.762167,-0.638204 3.53105,-0.140044 0.499711,-0.0057 0.552421,0.02894 0.765328,-0.04289 0.3576,-0.0041 0.958599,0.187069 2.86494,0.433564 1.589569,0.671278 v -0.01292 h 0.265615 v 0.125038 l 0.471808,0.0832 0.757576,0.35295 0.411342,0.156581 0.629936,0.328661 0.609783,0.284221 0.140044,-0.104904 -0.919324,-0.411861 -0.881084,-0.453718 0.0031,0.06098 -1.223186,-0.432018 v -0.112654 h -0.25218 l -1.638144,-0.733287 z',
        'm 55.249859,27.665495 -2.217436,-1.471744 -3.617868,2.442166 -4.127397,2.518444 -2.443779,1.754712 -0.912088,0.477489 0.128675,-0.166915 0.169498,-0.137974 0.286287,-0.153996 0.186036,-0.229444 0.854729,-0.388607 1.289844,-0.74547 v -0.02119 h 0.265615 v -0.115239 l 0.315743,-0.09767 1.005107,-0.806324 0.179835,-0.04909 0.463537,-0.131773 0.763778,-0.671327 1.762167,-0.918837 3.53105,-2.618969 v 0 l 1.052132,0.958684 0.765328,0.752237 0.3576,0.11283 0.958599,0.187069 2.86494,2.281065 1.589569,1.045455 v -0.01292 h 0.265615 v 0.125038 l 0.471808,0.0832 0.757576,0.633582 0.411342,0.156581 0.629936,0.328662 0.609783,0.284221 0.140044,-0.104905 -0.919324,-0.411861 -0.881084,-0.453718 0.0031,0.06098 -1.223182,-0.71265 v -0.112654 h -0.25218 l -1.638153,-1.107464 z'],

        attrs: {
          'stroke-width': '0px',
          'stroke': 'none',
          'fill': this.strokeColor } },


      {
        name: 'bottomDetails',
        d: [
        'm 52.817449,53.015886 -0.8723,11.116633 -1.384411,-0.06666 -3.531566,-0.65474 -0.808736,-0.377754 -0.249081,-3.204456 -0.391192,2.905766 -1.707904,-0.796851 -0.841809,-0.537951 0.280601,0.561205 0.608233,0.421164 2.94659,1.262456 4.303096,0.841809 2.853055,0.02376 2.946591,-0.25735 2.115116,-0.883666 -0.01035,0.135393 1.215945,-0.491443 -0.0093,-0.113688 1.365809,-0.423746 1.067117,-0.709518 -1.725993,0.807702 -0.709518,0.296621 -0.596344,-7.21868 -0.589629,7.615555 -1.819011,0.564309 c 0,0 -1.496904,0.04714 -0.608232,0.117306 0.888669,0.07016 -2.712495,0.280601 -2.712495,0.280601 l -0.485759,-0.02326 z m 9.89552,8.750372 1.084172,-0.506947 1.684134,-1.332736 z',
        'm 52.817449,53.015886 -0.8723,11.116633 -1.384411,-0.06666 -3.531566,-0.65474 -0.808736,-0.377754 -0.249081,-3.204456 -0.391192,2.905766 -1.707904,-0.796851 -0.841809,-0.537951 0.280601,0.561205 0.608233,0.421164 2.94659,1.262456 4.303096,0.841809 2.853055,0.02376 2.946591,-0.25735 2.115116,-0.883666 -0.01035,0.135393 1.215945,-0.491443 -0.0093,-0.113688 1.365809,-0.423746 1.067117,-0.709518 -1.725993,0.807702 -0.709518,0.296621 -0.596344,-7.21868 -0.589629,7.615555 -1.819011,0.564309 c 0,0 -1.496904,0.04714 -0.608232,0.117306 0.888669,0.07016 -2.712495,0.280601 -2.712495,0.280601 l -0.485759,-0.02326 z m 9.89552,8.750372 1.084172,-0.506947 1.684134,-1.332736 z',
        'm 53.015887,65.186719 -0.855764,4.45244 -1.599385,-1.869133 -3.531566,-2.771407 -0.808736,-0.377753 -0.249081,-0.558623 -0.391192,0.259932 -1.707904,-1.855185 -0.841809,-0.53795 0.280601,0.561205 0.608233,0.421163 6.641454,4.858618 2.046904,2.570388 0.424781,0.402042 2.977078,-3.413757 3.074231,-2.388484 -0.01035,0.135393 1.215945,-0.838708 -0.0093,-0.113689 1.365808,-0.952913 1.067117,-0.907955 -1.725993,1.320332 -0.709517,0.511596 -0.596345,0.255799 -0.589629,0.488341 -1.819011,1.424205 -0.608232,0.315743 -2.712495,2.413804 -0.08888,0.654736 z m 9.697082,-2.924368 1.084172,-1.003041 1.684134,-1.332735 z',
        'm 53.015887,76.828391 -0.855764,4.452441 -1.599385,-3.456634 -3.531566,-4.888074 -0.808736,-0.90692 -0.249081,-0.55862.........完整代码请登录后点击上方下载按钮下载查看

网友评论0