时间戳

首页 > 解决方案 > SVG not acting responsively despite being flexed and using relative units for resolution

html - SVG not acting responsively despite being flexed and using relative units for resolution

问题描述

I tried making the resolution use relative units but that did not work. I'm also confused about what should use relative units. The parent, child, or SVG...?

Expected: the SVG shrinks in size depending on the user's viewport without the use of media query if possible.

(I removed some paths from the SVG so I'm able to post, the full image is at the Codepen)

.flexParent {

    display: flex;
    justify-content: space-between;
    align-items: center;    

    width: 100%;
    max-width: 1610px;    

    padding-right: 10px;
    padding-left: 10px;  
    padding-bottom: 10px;
    
  }

  .contact {    
   
    width: 300px;
    height: 71px;
    border: none;    
  
    background: #009ABC;
    border-radius: 18px;
    
    border-style: solid;
    border-color: #ffffff;
   
    font-family: Alata;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    /* line-height: 71px; */
    text-align: center;
    letter-spacing: 0.3em;    
    color: #ffffff;
  
  }

  .contactContainer {

  z-index: 2;
  max-height: 500px;   

  /* background-color: yellow; */

  }

 .programmer {

  max-height: 500px;    

  } 
 <div class="flexParent">
  
      <div class="programmer">
        <svg id="programmer" width="594" height="451" viewBox="0 0 594 451" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
          <g clip-path="url(#clip0)">
            <path d="M287.383 398.746C159.532 389.016 7.06427 289.944 14.8267 187.933C22.589 85.9218 170.256 -9.0419 298.107 0.688383C425.958 10.4187 499.553 201.06 491.791 303.071C484.029 405.082 415.234 408.476 287.383 398.746Z" fill="#00D1FF" />
            <path d="M298.106 415.131C445.502 415.131 564.991 407.81 564.991 398.779C564.991 389.748 445.502 382.427 298.106 382.427C150.709 382.427 31.2211 389.748 31.2211 398.779C31.2211 407.81 150.709 415.131 298.106 415.131Z" fill="#004150" />
            <path opacity="0.1" d="M298.106 409.329C423.655 409.329 525.433 404.487 525.433 398.515C525.433 392.543 423.655 387.702 298.106 387.702C172.557 387.702 70.7791 392.543 70.7791 398.515C70.7791 404.487 172.557 409.329 298.106 409.329Z" fill="black" />
            <path d="M111.919 451C173.731 451 223.839 446.631 223.839 441.242C223.839 435.852 173.731 431.483 111.919 431.483C50.108 431.483 0 435.852 0 441.242C0 446.631 50.108 451 111.919 451Z" fill="#004150" />
            <path opacity="0.1" d="M111.919 447.537C164.569 447.537 207.25 444.648 207.25 441.084C207.25 437.52 164.569 434.631 111.919 434.631C59.2698 434.631 16.5889 437.52 16.5889 441.084C16.5889 444.648 59.2698 447.537 111.919 447.537Z" fill="black" />
            <path d="M500.116 85.4526H103.48V396.669H500.116V85.4526Z" fill="#3F3D56" />
            <path d="M297.285 127.983H199.436C199.28 127.984 199.125 127.953 198.981 127.894C198.836 127.834 198.705 127.747 198.595 127.636C198.484 127.526 198.396 127.395 198.337 127.251C198.277 127.107 198.246 126.952 198.246 126.796C198.246 126.64 198.277 126.485 198.337 126.341C198.396 126.196 198.484 126.065 198.595 125.955C198.705 125.845 198.836 125.757 198.981 125.698C199.125 125.638 199.28 125.608 199.436 125.608H297.285C297.6 125.609 297.901 125.734 298.124 125.957C298.346 126.18 298.47 126.481 298.47 126.796C298.47 127.11 298.346 127.412 298.124 127.635C297.901 127.857 297.6 127.983 297.285 127.983V127.983Z" fill="#F2F2F2" />               
            <path d="M110.833 367.49C111.226 370.297 111.73 373.114 111.596 375.945C111.408 379.898 109.982 383.706 109.719 387.655C109.522 390.604 109.977 393.585 109.567 396.512C109.305 398.386 108.694 400.193 108.316 402.047C107.717 405.069 107.733 408.181 108.365 411.196C108.997 414.211 110.231 417.068 111.994 419.594C112.253 420.027 112.621 420.384 113.061 420.629C113.483 420.785 113.935 420.845 114.384 420.804C118.832 420.713 123.268 420.31 127.659 419.597C127.981 419.584 128.285 419.45 128.512 419.221C128.611 419.07 128.674 418.898 128.697 418.718C129.511 414.532 127.654 410.334 127.182 406.096C126.678 401.57 127.764 397.035 128.842 392.611C129.33 390.429 129.941 388.275 130.67 386.161C131.191 384.738 131.821 383.354 132.272 381.908C132.912 379.636 133.301 377.301 133.433 374.944C133.747 371.225 133.913 367.498 133.932 363.762C134.038 360.222 133.744 356.681 133.054 353.207C132.063 348.809 130.035 344.724 128.024 340.689C126.949 340.947 125.94 341.427 125.061 342.098C122.47 343.776 119.764 345.271 116.965 346.571C115.083 347.445 111.415 348.066 110.221 349.887C109.044 351.683 109.803 355.347 109.893 357.327C110.048 360.727 110.361 364.115 110.833 367.49Z" fill="#2F2E41" />
            <path opacity="0.1" d="M110.833 367.49C111.226 370.297 111.73 373.114 111.596 375.945C111.408 379.898 109.982 383.706 109.719 387.655C109.522 390.604 109.977 393.585 109.567 396.512C109.305 398.386 108.694 400.193 108.316 402.047C107.717 405.069 107.733 408.181 108.365 411.196C108.997 414.211 110.231 417.068 111.994 419.594C112.253 420.027 112.621 420.384 113.061 420.629C113.483 420.785 113.935 420.845 114.384 420.804C118.832 420.713 123.268 420.31 127.659 419.597C127.981 419.584 128.285 419.45 128.512 419.221C128.611 419.07 128.674 418.898 128.697 418.718C129.511 414.532 127.654 410.334 127.182 406.096C126.678 401.57 127.764 397.035 128.842 392.611C129.33 390.429 129.941 388.275 130.67 386.161C131.191 384.738 131.821 383.354 132.272 381.908C132.912 379.636 133.301 377.301 133.433 374.944C133.747 371.225 133.913 367.498 133.932 363.762C134.038 360.222 133.744 356.681 133.054 353.207C132.063 348.809 130.035 344.724 128.024 340.689C126.949 340.947 125.94 341.427 125.061 342.098C122.47 343.776 119.764 345.271 116.965 346.571C115.083 347.445 111.415 348.066 110.221 349.887C109.044 351.683 109.803 355.347 109.893 357.327C110.048 360.727 110.361 364.115 110.833 367.49Z" fill="black" />
            <path d="M90.1718 307.533C88.1423 312.998 91.1255 318.903 93.7173 324.124C100.102 336.987 104.536 350.713 108.947 364.38C109.277 365.404 109.607 366.521 109.239 367.532C108.921 368.25 108.405 368.862 107.751 369.297C104.71 371.607 100.838 372.43 97.2152 373.638C93.7144 374.807 90.3615 376.378 87.2241 378.322C84.5991 379.949 82.1401 381.827 79.686 383.701L71.8735 389.668C71.3677 390.01 70.9257 390.438 70.5677 390.933C69.8142 392.115 70.1228 393.658 70.498 395.009C71.4915 398.586 72.7706 402.077 74.323 405.449C74.5785 406.188 75.0648 406.826 75.7102 407.267C76.9296 407.922 78.4211 407.054 79.3523 406.029C80.2834 405.005 81.0888 403.73 82.4014 403.29C83.7125 402.851 85.1555 403.383 86.5248 403.19C88.7393 402.88 90.2096 400.839 91.8059 399.273C98.3279 392.874 109.217 393.338 116.391 387.68C117.428 386.752 118.526 385.895 119.678 385.113C120.891 384.396 122.266 384.002 123.524 383.369C127.352 381.441 129.758 377.456 131.047 373.369C132.336 369.282 132.704 364.967 133.63 360.783C134.109 358.62 134.739 356.48 134.952 354.275C135.089 352.223 135.044 350.164 134.818 348.121L132.23 316.094C132.019 313.487 131.808 310.876 131.399 308.293C123.71 308.567 116.027 308.877 108.335 308.968C102.214 309.04 95.9798 309.468 90.1718 307.533Z" fill="#2F2E41" />
            <path d="M87.3455 315.025C88.3884 316.703 90.9269 316.668 92.6748 315.749C94.4228 314.829 95.7808 313.284 97.533 312.372C99.8874 311.147 102.673 311.193 105.327 311.268C109.527 311.386 113.779 311.513 117.82 312.664C122 313.855 126.069 316.147 130.391 315.69C131.143 315.61 131.965 315.394 132.375 314.758C132.615 314.298 132.727 313.781 132.702 313.263L132.843 309.486C132.929 308.833 132.825 308.169 132.542 307.574C132.179 307.079 131.682 306.698 131.11 306.477C124.958 303.499 117.942 302.944 111.112 302.71C107.64 302.591 104.166 302.542 100.691 302.563C97.742 302.581 94.2018 302.155 91.3348 302.943C87.487 304 85.3934 311.886 87.3455 315.025Z" fill="#2F2E41" />
            <path d="M125.974 216.124C117.913 216.053 110.609 210.732 102.549 210.602C101.575 210.535 100.6 210.703 99.7046 211.093C98.5815 211.659 97.8432 212.753 96.99 213.677C94.6069 216.258 91.1559 217.636 88.7076 220.155C86.412 222.517 85.1353 226.036 86.0416 229.203C86.9479 232.37 90.3685 234.799 93.573 234.038C94.864 229.858 97.5286 226.238 101.135 223.762C103.011 222.559 104.989 221.521 107.045 220.66C110.667 219.018 114.718 217.346 118.5 218.576C119.895 219.103 121.21 219.82 122.408 220.707L128.713 224.943C127.978 222.045 127.317 218.795 125.974 216.124Z" fill="#009ABC" />
            <path d="M92.6445 231.236C91.5742 232.571 93.116 234.506 92.8801 236.201C92.7233 237.327 91.7965 238.187 91.4106 239.257C91.0109 240.365 91.2228 241.592 91.0712 242.76C90.9191 243.61 90.6941 244.444 90.3987 245.255C89.7196 247.677 89.2457 250.152 88.9818 252.653L87.5709 263.19C87.3261 264.776 87.1771 266.375 87.1247 267.979C87.1958 269.177 87.1157 270.38 86.8863 271.559C86.5738 272.71 85.8821 273.717 85.4167 274.816C84.9514 275.915 84.7357 277.244 85.3643 278.258C83.2591 280.011 82.6331 283.455 84.1051 285.766C84.3854 286.126 84.6046 286.53 84.754 286.961C84.8353 287.564 84.7359 288.177 84.4682 288.723L83.0416 292.525C82.6765 293.498 82.561 294.979 83.5762 295.201C82.7353 296.074 82.0802 297.109 81.6504 298.243C81.4419 298.812 81.3796 299.425 81.4692 300.024C81.5588 300.624 81.7975 301.191 82.1633 301.675C82.5177 301.986 82.8195 302.352 83.057 302.759C83.1965 303.327 83.1605 303.923 82.9537 304.47C82.7404 305.3 82.6992 306.165 82.8328 307.012C82.9665 307.859 83.272 308.669 83.7306 309.393C84.2058 310.108 84.8788 310.668 85.6673 311.006C86.4559 311.344 87.3258 311.445 88.1708 311.297C91.0245 310.653 93.5888 309.637 96.4662 310.165C102.661 311.302 108.877 312.444 114.877 314.359C121.725 316.546 128.356 319.753 135.514 320.426C135.985 320.522 136.474 320.446 136.894 320.211C137.258 319.865 137.485 319.399 137.532 318.899C138.269 315.441 139.007 311.984 139.744 308.526C140.636 304.693 141.314 300.814 141.777 296.907C142.029 294.385 142.101 291.849 142.173 289.315L142.743 269.149C143.01 266.177 142.614 263.182 141.582 260.382L138.303 249.912C136.432 243.938 132.138 238.639 130.61 232.568C129.643 228.725 128.928 224.601 126.334 221.606C122.635 217.336 116.236 216.672 110.635 217.406C108.105 217.738 105.553 218.31 103.364 219.622C100.833 221.14 98.9688 223.53 97.1651 225.866C95.6786 227.791 94.1655 229.338 92.6445 231.236Z" fill="#009ABC" />
            <path d="M105.722 290.551C106.184 292.541 107.153 294.376 107.746 296.331C108.74 299.606 108.656 303.133 109.648 306.409C110.064 307.784 110.667 309.104 110.966 310.509C111.663 313.785 110.645 317.174 109.382 320.276C108.118 323.377 106.579 326.436 106.169 329.76C105.88 332.101 106.295 334.744 108.1 336.264C109.973 337.841 112.695 337.734 115.135 337.524C116.011 337.5 116.876 337.32 117.689 336.993C119.554 336.11 120.34 333.902 120.777 331.884C122.238 325.122 121.821 318.113 121.396 311.208L120.285 293.15C120.071 289.674 119.842 286.125 118.771 282.787C118.381 281.573 117.702 279.119 116.593 278.344C115.494 277.576 112.358 277.542 110.998 277.478C104.617 277.178 104.688 286.085 105.722 290.551Z" fill="#FBBEBE" />
            <path d="M112.792 223.877C111.489 223.195 109.847 223.489 108.588 224.249C107.371 225.082 106.306 226.116 105.438 227.307C102.622 230.745 99.6408 234.689 100.058 239.113C100.215 240.772 100.85 242.342 101.281 243.952C103.169 251.009 101.081 258.473 101.32 265.775C101.459 269.994 102.377 274.144 103.291 278.266C103.478 279.107 103.777 280.08 104.59 280.364C105.201 280.576 105.861 280.303 106.466 280.073C108.72 279.24 111.141 278.962 113.524 279.263C115.908 279.563 118.184 280.433 120.16 281.799C121.671 280.993 121.105 278.443 120.766 276.764C119.76 271.775 121.126 266.628 122.786 261.817C124.445 257.006 126.431 252.201 126.706 247.119C127.017 241.361 125.108 235.741 123.224 230.291C122.813 229.101 122.364 227.854 121.411 227.032C120.595 226.425 119.66 225.998 118.667 225.778C116.666 225.187 114.64 224.845 112.792 223.877Z" fill="#2F2E41" />
          </g>
          <defs>
            <clipPath id="clip0">
              <rect width="594" height="451" fill="white" />
            </clipPath>
          </defs>
        </svg>
  
      </div>
       
      <div class="contactContainer">
      <button class="contact" onclick="document.location.href='contact.html'"> VIEW </button>      
  </div>

</div>

CODEPEN

标签： htmlcsssvgflexbox

解决方案

您可以使用和使大小svg适合屏幕。max-width: 100%height: auto

只需将其添加到您的 ss 中：

#programmer {
  max-width: 100%;
  height: auto;
}


.flexParent {

    display: flex;
    justify-content: space-between;
    align-items: center;    

    width: 100%;
    max-width: 1610px;    

    padding-right: 10px;
    padding-left: 10px;  
    padding-bottom: 10px;
    
  }

  .contact {    
   
    width: 300px;
    height: 71px;
    border: none;    
  
    background: #009ABC;
    border-radius: 18px;
    
    border-style: solid;
    border-color: #ffffff;
   
    font-family: Alata;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    /* line-height: 71px; */
    text-align: center;
    letter-spacing: 0.3em;    
    color: #ffffff;
  
  }

  .contactContainer {

  z-index: 2;
  max-height: 500px;   

  /* background-color: yellow; */

  }

 .programmer {

  max-height: 500px;    

  }
  
#programmer {
  max-width: 100%;
  height: auto;
}
<div class="flexParent">
  
      <div class="programmer">
        <svg id="programmer" width="594" height="451" viewBox="0 0 594 451" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
          <g clip-path="url(#clip0)">
            <path d="M287.383 398.746C159.532 389.016 7.06427 289.944 14.8267 187.933C22.589 85.9218 170.256 -9.0419 298.107 0.688383C425.958 10.4187 499.553 201.06 491.791 303.071C484.029 405.082 415.234 408.476 287.383 398.746Z" fill="#00D1FF" />
            <path d="M298.106 415.131C445.502 415.131 564.991 407.81 564.991 398.779C564.991 389.748 445.502 382.427 298.106 382.427C150.709 382.427 31.2211 389.748 31.2211 398.779C31.2211 407.81 150.709 415.131 298.106 415.131Z" fill="#004150" />
            <path opacity="0.1" d="M298.106 409.329C423.655 409.329 525.433 404.487 525.433 398.515C525.433 392.543 423.655 387.702 298.106 387.702C172.557 387.702 70.7791 392.543 70.7791 398.515C70.7791 404.487 172.557 409.329 298.106 409.329Z" fill="black" />
            <path d="M111.919 451C173.731 451 223.839 446.631 223.839 441.242C223.839 435.852 173.731 431.483 111.919 431.483C50.108 431.483 0 435.852 0 441.242C0 446.631 50.108 451 111.919 451Z" fill="#004150" />
            <path opacity="0.1" d="M111.919 447.537C164.569 447.537 207.25 444.648 207.25 441.084C207.25 437.52 164.569 434.631 111.919 434.631C59.2698 434.631 16.5889 437.52 16.5889 441.084C16.5889 444.648 59.2698 447.537 111.919 447.537Z" fill="black" />
            <path d="M500.116 85.4526H103.48V396.669H500.116V85.4526Z" fill="#3F3D56" />
            <path d="M297.285 127.983H199.436C199.28 127.984 199.125 127.953 198.981 127.894C198.836 127.834 198.705 127.747 198.595 127.636C198.484 127.526 198.396 127.395 198.337 127.251C198.277 127.107 198.246 126.952 198.246 126.796C198.246 126.64 198.277 126.485 198.337 126.341C198.396 126.196 198.484 126.065 198.595 125.955C198.705 125.845 198.836 125.757 198.981 125.698C199.125 125.638 199.28 125.608 199.436 125.608H297.285C297.6 125.609 297.901 125.734 298.124 125.957C298.346 126.18 298.47 126.481 298.47 126.796C298.47 127.11 298.346 127.412 298.124 127.635C297.901 127.857 297.6 127.983 297.285 127.983V127.983Z" fill="#F2F2F2" />               
            <path d="M110.833 367.49C111.226 370.297 111.73 373.114 111.596 375.945C111.408 379.898 109.982 383.706 109.719 387.655C109.522 390.604 109.977 393.585 109.567 396.512C109.305 398.386 108.694 400.193 108.316 402.047C107.717 405.069 107.733 408.181 108.365 411.196C108.997 414.211 110.231 417.068 111.994 419.594C112.253 420.027 112.621 420.384 113.061 420.629C113.483 420.785 113.935 420.845 114.384 420.804C118.832 420.713 123.268 420.31 127.659 419.597C127.981 419.584 128.285 419.45 128.512 419.221C128.611 419.07 128.674 418.898 128.697 418.718C129.511 414.532 127.654 410.334 127.182 406.096C126.678 401.57 127.764 397.035 128.842 392.611C129.33 390.429 129.941 388.275 130.67 386.161C131.191 384.738 131.821 383.354 132.272 381.908C132.912 379.636 133.301 377.301 133.433 374.944C133.747 371.225 133.913 367.498 133.932 363.762C134.038 360.222 133.744 356.681 133.054 353.207C132.063 348.809 130.035 344.724 128.024 340.689C126.949 340.947 125.94 341.427 125.061 342.098C122.47 343.776 119.764 345.271 116.965 346.571C115.083 347.445 111.415 348.066 110.221 349.887C109.044 351.683 109.803 355.347 109.893 357.327C110.048 360.727 110.361 364.115 110.833 367.49Z" fill="#2F2E41" />
            <path opacity="0.1" d="M110.833 367.49C111.226 370.297 111.73 373.114 111.596 375.945C111.408 379.898 109.982 383.706 109.719 387.655C109.522 390.604 109.977 393.585 109.567 396.512C109.305 398.386 108.694 400.193 108.316 402.047C107.717 405.069 107.733 408.181 108.365 411.196C108.997 414.211 110.231 417.068 111.994 419.594C112.253 420.027 112.621 420.384 113.061 420.629C113.483 420.785 113.935 420.845 114.384 420.804C118.832 420.713 123.268 420.31 127.659 419.597C127.981 419.584 128.285 419.45 128.512 419.221C128.611 419.07 128.674 418.898 128.697 418.718C129.511 414.532 127.654 410.334 127.182 406.096C126.678 401.57 127.764 397.035 128.842 392.611C129.33 390.429 129.941 388.275 130.67 386.161C131.191 384.738 131.821 383.354 132.272 381.908C132.912 379.636 133.301 377.301 133.433 374.944C133.747 371.225 133.913 367.498 133.932 363.762C134.038 360.222 133.744 356.681 133.054 353.207C132.063 348.809 130.035 344.724 128.024 340.689C126.949 340.947 125.94 341.427 125.061 342.098C122.47 343.776 119.764 345.271 116.965 346.571C115.083 347.445 111.415 348.066 110.221 349.887C109.044 351.683 109.803 355.347 109.893 357.327C110.048 360.727 110.361 364.115 110.833 367.49Z" fill="black" />
            <path d="M90.1718 307.533C88.1423 312.998 91.1255 318.903 93.7173 324.124C100.102 336.987 104.536 350.713 108.947 364.38C109.277 365.404 109.607 366.521 109.239 367.532C108.921 368.25 108.405 368.862 107.751 369.297C104.71 371.607 100.838 372.43 97.2152 373.638C93.7144 374.807 90.3615 376.378 87.2241 378.322C84.5991 379.949 82.1401 381.827 79.686 383.701L71.8735 389.668C71.3677 390.01 70.9257 390.438 70.5677 390.933C69.8142 392.115 70.1228 393.658 70.498 395.009C71.4915 398.586 72.7706 402.077 74.323 405.449C74.5785 406.188 75.0648 406.826 75.7102 407.267C76.9296 407.922 78.4211 407.054 79.3523 406.029C80.2834 405.005 81.0888 403.73 82.4014 403.29C83.7125 402.851 85.1555 403.383 86.5248 403.19C88.7393 402.88 90.2096 400.839 91.8059 399.273C98.3279 392.874 109.217 393.338 116.391 387.68C117.428 386.752 118.526 385.895 119.678 385.113C120.891 384.396 122.266 384.002 123.524 383.369C127.352 381.441 129.758 377.456 131.047 373.369C132.336 369.282 132.704 364.967 133.63 360.783C134.109 358.62 134.739 356.48 134.952 354.275C135.089 352.223 135.044 350.164 134.818 348.121L132.23 316.094C132.019 313.487 131.808 310.876 131.399 308.293C123.71 308.567 116.027 308.877 108.335 308.968C102.214 309.04 95.9798 309.468 90.1718 307.533Z" fill="#2F2E41" />
            <path d="M87.3455 315.025C88.3884 316.703 90.9269 316.668 92.6748 315.749C94.4228 314.829 95.7808 313.284 97.533 312.372C99.8874 311.147 102.673 311.193 105.327 311.268C109.527 311.386 113.779 311.513 117.82 312.664C122 313.855 126.069 316.147 130.391 315.69C131.143 315.61 131.965 315.394 132.375 314.758C132.615 314.298 132.727 313.781 132.702 313.263L132.843 309.486C132.929 308.833 132.825 308.169 132.542 307.574C132.179 307.079 131.682 306.698 131.11 306.477C124.958 303.499 117.942 302.944 111.112 302.71C107.64 302.591 104.166 302.542 100.691 302.563C97.742 302.581 94.2018 302.155 91.3348 302.943C87.487 304 85.3934 311.886 87.3455 315.025Z" fill="#2F2E41" />
            <path d="M125.974 216.124C117.913 216.053 110.609 210.732 102.549 210.602C101.575 210.535 100.6 210.703 99.7046 211.093C98.5815 211.659 97.8432 212.753 96.99 213.677C94.6069 216.258 91.1559 217.636 88.7076 220.155C86.412 222.517 85.1353 226.036 86.0416 229.203C86.9479 232.37 90.3685 234.799 93.573 234.038C94.864 229.858 97.5286 226.238 101.135 223.762C103.011 222.559 104.989 221.521 107.045 220.66C110.667 219.018 114.718 217.346 118.5 218.576C119.895 219.103 121.21 219.82 122.408 220.707L128.713 224.943C127.978 222.045 127.317 218.795 125.974 216.124Z" fill="#009ABC" />
            <path d="M92.6445 231.236C91.5742 232.571 93.116 234.506 92.8801 236.201C92.7233 237.327 91.7965 238.187 91.4106 239.257C91.0109 240.365 91.2228 241.592 91.0712 242.76C90.9191 243.61 90.6941 244.444 90.3987 245.255C89.7196 247.677 89.2457 250.152 88.9818 252.653L87.5709 263.19C87.3261 264.776 87.1771 266.375 87.1247 267.979C87.1958 269.177 87.1157 270.38 86.8863 271.559C86.5738 272.71 85.8821 273.717 85.4167 274.816C84.9514 275.915 84.7357 277.244 85.3643 278.258C83.2591 280.011 82.6331 283.455 84.1051 285.766C84.3854 286.126 84.6046 286.53 84.754 286.961C84.8353 287.564 84.7359 288.177 84.4682 288.723L83.0416 292.525C82.6765 293.498 82.561 294.979 83.5762 295.201C82.7353 296.074 82.0802 297.109 81.6504 298.243C81.4419 298.812 81.3796 299.425 81.4692 300.024C81.5588 300.624 81.7975 301.191 82.1633 301.675C82.5177 301.986 82.8195 302.352 83.057 302.759C83.1965 303.327 83.1605 303.923 82.9537 304.47C82.7404 305.3 82.6992 306.165 82.8328 307.012C82.9665 307.859 83.272 308.669 83.7306 309.393C84.2058 310.108 84.8788 310.668 85.6673 311.006C86.4559 311.344 87.3258 311.445 88.1708 311.297C91.0245 310.653 93.5888 309.637 96.4662 310.165C102.661 311.302 108.877 312.444 114.877 314.359C121.725 316.546 128.356 319.753 135.514 320.426C135.985 320.522 136.474 320.446 136.894 320.211C137.258 319.865 137.485 319.399 137.532 318.899C138.269 315.441 139.007 311.984 139.744 308.526C140.636 304.693 141.314 300.814 141.777 296.907C142.029 294.385 142.101 291.849 142.173 289.315L142.743 269.149C143.01 266.177 142.614 263.182 141.582 260.382L138.303 249.912C136.432 243.938 132.138 238.639 130.61 232.568C129.643 228.725 128.928 224.601 126.334 221.606C122.635 217.336 116.236 216.672 110.635 217.406C108.105 217.738 105.553 218.31 103.364 219.622C100.833 221.14 98.9688 223.53 97.1651 225.866C95.6786 227.791 94.1655 229.338 92.6445 231.236Z" fill="#009ABC" />
            <path d="M105.722 290.551C106.184 292.541 107.153 294.376 107.746 296.331C108.74 299.606 108.656 303.133 109.648 306.409C110.064 307.784 110.667 309.104 110.966 310.509C111.663 313.785 110.645 317.174 109.382 320.276C108.118 323.377 106.579 326.436 106.169 329.76C105.88 332.101 106.295 334.744 108.1 336.264C109.973 337.841 112.695 337.734 115.135 337.524C116.011 337.5 116.876 337.32 117.689 336.993C119.554 336.11 120.34 333.902 120.777 331.884C122.238 325.122 121.821 318.113 121.396 311.208L120.285 293.15C120.071 289.674 119.842 286.125 118.771 282.787C118.381 281.573 117.702 279.119 116.593 278.344C115.494 277.576 112.358 277.542 110.998 277.478C104.617 277.178 104.688 286.085 105.722 290.551Z" fill="#FBBEBE" />
            <path d="M112.792 223.877C111.489 223.195 109.847 223.489 108.588 224.249C107.371 225.082 106.306 226.116 105.438 227.307C102.622 230.745 99.6408 234.689 100.058 239.113C100.215 240.772 100.85 242.342 101.281 243.952C103.169 251.009 101.081 258.473 101.32 265.775C101.459 269.994 102.377 274.144 103.291 278.266C103.478 279.107 103.777 280.08 104.59 280.364C105.201 280.576 105.861 280.303 106.466 280.073C108.72 279.24 111.141 278.962 113.524 279.263C115.908 279.563 118.184 280.433 120.16 281.799C121.671 280.993 121.105 278.443 120.766 276.764C119.76 271.775 121.126 266.628 122.786 261.817C124.445 257.006 126.431 252.201 126.706 247.119C127.017 241.361 125.108 235.741 123.224 230.291C122.813 229.101 122.364 227.854 121.411 227.032C120.595 226.425 119.66 225.998 118.667 225.778C116.666 225.187 114.64 224.845 112.792 223.877Z" fill="#2F2E41" />
          </g>
          <defs>
            <clipPath id="clip0">
              <rect width="594" height="451" fill="white" />
            </clipPath>
          </defs>
        </svg>
  
      </div>
       
      <div class="contactContainer">
      <button class="contact" onclick="document.location.href='contact.html'"> VIEW </button>      
  </div>

</div>

推荐阅读