微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

SVG动画只能在Safari中部分运行

如何解决SVG动画只能在Safari中部分运行

我一直在用VS Code制作SVG动画,然后使用插件Elements Plus将它们作为内嵌SVG图像插入Elementor,然后添加我的CSS进行动画处理。

我现在有4个可以在所有浏览器上使用,但是我创建的最后一个仅在Safari上进行了一种转换。在其他浏览器上也可以正常工作。我不知所措,想弄清楚为什么它只是部分动画,以及如何解决它。我在网上看过,没有找到答案。我不确定如何分享,但这是我的尝试-HTML和CSS。感谢您尝试尝试的任何想法,以及您对我的无知所带来的耐心!

   <!DOCTYPE html>
<html lang="en">
  <head>
<Meta charset="UTF-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<title>responsive-anime</title>
<style>
  body {
    text-align: center;
  }

  #logo {
    display: none;
  }

  #screen {
    animation: screensize 8s ease-in infinite;
    transform-origin: center;
  }
  @keyframes screensize {
    0% {
      transform: scalex(100%);
    }
    28% {
      transform: scalex(100%);
    }
    32% {
      transform: scalex(103%);
    }
    38% {
      transform: scalex(55%);
    }
    58% {
      transform: scalex(55%);
    }
    63% {
      transform: scalex(58%);
    }

    68% {
      transform: scaley(70%) scalex(25%);
    }
    88% {
      transform: scaley(70%) scalex(25%);
    }
    93% {
      transform: scaley(73%) scalex(28%);
    }

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

  #path1469 {
    animation: hero 8s ease-in infinite;
    transform-origin: center;
  }
  @keyframes hero {
    0% {
      transform: scalex(100%);
    }
    28% {
      transform: scalex(100%);
    }
    32% {
      transform: scalex(103%);
    }
    38% {
      transform: scalex(55%);
    }
    58% {
      transform: scalex(55%);
    }
    63% {
      transform: scalex(58%);
    }

    68% {
      transform: scaley(70%) scalex(25%);
    }
    88% {
      transform: scaley(70%) scalex(25%);
    }
    93% {
      transform: scaley(73%) scalex(28%);
    }

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

  #path1468 {
    animation: heroimage 8s ease-in infinite;
    transform-origin: center;
  }
  @keyframes heroimage {
    0% {
      transform: scalex(100%);
    }
    63% {
      transform: scalex(100%);
    }
    68% {
      transform: scaley(50%) scalex(50%);
    }

    93% {
      transform: scaley(53%) scalex(53%);
    }
    100% {
      transform: scalex(100%);
    }
  }

  #path1464 {
    animation: heroshadow 8s ease-in infinite;
    transform-origin: center;
  }
  @keyframes heroshadow {
    0% {
      transform: scalex(100%);
    }
    63% {
      transform: scalex(100%);
    }
    68% {
      transform: scaley(50%) scalex(50%);
    }
    93% {
      transform: scaley(53%) scalex(53%);
    }

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

  #thumb-4 {
    animation: thumb4 8s ease-in infinite;
    transform-origin: left;
    transform-Box: fill-Box;
  }
  @keyframes thumb4 {
    0% {
      transform: scalex(100%);
    }
    28% {
      transform: scalex(100%);
    }
    38% {
      transform: scalex(0%);
    }

    93% {
      transform: scalex(0%);
    }

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

  #thumb-1 {
    animation: thumb1 8s ease-in infinite;
    transform-origin: right;
    transform-Box: fill-Box;
  }
  @keyframes thumb1 {
    0% {
      transform: scalex(100%);
    }
    28% {
      transform: scalex(100%);
    }
    38% {
      transform: scalex(0%);
    }

    93% {
      transform: scalex(0%);
    }

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

  #text-4 {
    animation: text4 8s ease-in infinite;
    transform-origin: left;
    transform-Box: fill-Box;
  }
  @keyframes text4 {
    0% {
      transform: scalex(100%);
    }
    28% {
      transform: scalex(100%);
    }
    38% {
      transform: scalex(0%);
    }

    93% {
      transform: scalex(0%);
    }

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

  #text-1 {
    animation: text1 8s ease-in infinite;
    transform-origin: right;
    transform-Box: fill-Box;
  }
  @keyframes text1 {
    0% {
      transform: scalex(100%);
    }
    28% {
      transform: scalex(100%);
    }
    38% {
      transform: scalex(0%);
    }

    93% {
      transform: scalex(0%);
    }

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

  #thumb-2 {
    animation: thumb2 8s ease-in infinite;
    transform-origin: left;
    transform-Box: fill-Box;
  }
  @keyframes thumb2 {
    0% {
      transform: translatex(0%);
    }

    63% {
      transform: translatex(0%);
    }

    68% {
      transform: translatex(52%);
    }
    93% {
      transform: translatex(52%);
    }
    100% {
      transform: translatex(0%);
    }
  }

  #thumb-3 {
    animation: thumb3 8s ease-in infinite;
    transform-origin: right;
    transform-Box: fill-Box;
  }
  @keyframes thumb3 {
    0% {
      transform: translatex(0%);
    }

    63% {
      transform: translatex(0%);
    }

    68% {
      transform: translatex(-52%);
    }
    93% {
      transform: translatex(-52%);
    }
    100% {
      transform: translatex(0%);
    }
  }

  #text-3 {
    animation: text3 8s ease-in infinite;
    transform-Box: fill-Box;
    transform-origin: left;
  }
  @keyframes text3 {
    0% {
      transform: scalex(100%);
    }
    63% {
      transform: scalex(100%);
    }
    68% {
      transform: scalex(0%);
    }

    93% {
      transform: scalex(0%);
    }

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

  #text-2 {
    animation: text2 8s ease-in infinite;
    transform-Box: fill-Box;
    transform-origin: right;
  }
  @keyframes text2 {
    0% {
      transform: scalex(100%);
    }
    63% {
      transform: scalex(100%);
    }
    68% {
      transform: scalex(0%);
    }

    93% {
      transform: scalex(0%);
    }

    100% {
      transform: scalex(100%);
    }
  }
</style>
  </head>
  <body>
<svg
  width="182"
  height="126"
  viewBox="0 0 182 126"
  fill="none"
  xmlns="http://www.w3.org   /2000/svg"
>
  <g id="responsive-new 1">
    <g id="layer1">
      <g id="screen">
        <g id="rect1636" filter="url(#filter0_f)">
          <path
            d="M170.283 7.50037H11.6963C9.37896 7.50037 7.50037 9.37896 7.50037 11.6963V113.558C7.50037 115.876 9.37896 117.754 11.6963 117.754H170.283C172.601 117.754 174.479 115.876 174.479 113.558V11.6963C174.479 9.37896 172.601 7.50037 170.283 7.50037Z"
            fill="#D8D8D8"
          />
        </g>
        <path
          id="rect1458"
          d="M167.991 9.09433H13.989C11.7387 9.09433 9.91441 10.9186 9.91441 13.169V112.086C9.91441 114.336 11.7387 116.16 13.989 116.16H167.991C170.241 116.16 172.065 114.336 172.065 112.086V13.169C172.065 10.9186 170.241 9.09433 167.991 9.09433Z"
          fill="white"
        />
      </g>
      <g id="image">
        <path
          id="path1469"
          d="M156.715 30.754H23.6972C22.9494 30.754 22.3432 31.3602 22.3432 32.1081V65.3717C22.3432 66.1196 22.9494 66.7258 23.6972 66.7258H156.715C157.462 66.7258 158.069 66.1196 158.069 65.3717V32.1081C158.069 31.3602 157.462 30.754 156.715 30.754Z"
          fill="#736F75"
          fill-opacity="0.546784"
        />
        <path
          id="path1468"
          opacity="0.375309"
          d="M81.7481 38.3122C80.8323 38.3122 79.922 38.6893 79.2745 39.3368C78.6269 39.9844 78.2498 40.8947 78.2499 41.8105C78.2498 42.7263 78.6269 43.6366 79.2745 44.2842C79.922 44.9318 80.8323 45.3088 81.7481 45.3088C82.6639 45.3088 83.5742 44.9318 84.2218 44.2842C84.8694 43.6366 85.2464 42.7263 85.2464 41.8105C85.2464 40.8947 84.8694 39.9844 84.2218 39.3368C83.5742 38.6893 82.6639 38.3122 81.7481 38.3122ZM95.1586 43.9442C94.9976 43.9442 94.8806 44.0067 94.7595 44.0829C94.6383 44.159 94.5146 44.2592 94.3798 44.3819C94.1101 44.6275 93.7991 44.9644 93.4549 45.366C92.7663 46.1692 91.9487 47.2301 91.1424 48.2911C90.3361 49.352 89.5415 50.4131 88.9078 51.206C88.591 51.6024 88.3135 51.9323 88.1013 52.1566C87.9952 52.2687 87.9045 52.3547 87.8416 52.405C87.8205 52.4219 87.8081 52.4257 87.7941 52.4323C87.8217 52.4259 87.7502 52.4156 87.6239 52.3197C87.4828 52.2127 87.2984 52.0439 87.0927 51.8369C86.6813 51.4228 86.1793 50.8555 85.6717 50.2846C85.1641 49.7136 84.651 49.1388 84.2031 48.6988C83.9792 48.4788 83.7723 48.2925 83.5816 48.1532C83.3908 48.0139 83.2283 47.9012 82.9939 47.9012C82.8263 47.9012 82.7321 47.9663 82.6201 48.0387C82.508 48.1111 82.3889 48.2065 82.2556 48.3242C81.989 48.5596 81.6687 48.8848 81.3104 49.2744C80.5937 50.0536 79.728 51.0884 78.8975 52.134C78.0669 53.1795 77.273 54.2344 76.7019 55.0547C76.4163 55.4649 76.1868 55.815 76.0328 56.084C75.9558 56.2185 75.8976 56.3306 75.858 56.4341C75.8381 56.4858 75.8218 56.5343 75.814 56.5981C75.8061 56.6618 75.7956 56.7692 75.895 56.8784C75.9216 56.9078 75.9542 56.9312 75.9905 56.9473C76.0267 56.9633 76.066 56.9716 76.1056 56.9715H104.979C105.054 56.9715 105.126 56.9418 105.179 56.889C105.29 56.7788 105.27 56.6781 105.264 56.6319C105.258 56.5858 105.248 56.5596 105.238 56.5334C105.219 56.4811 105.195 56.4342 105.164 56.3776C105.103 56.2644 105.015 56.1193 104.899 55.9387C104.667 55.5777 104.328 55.0804 103.913 54.4897C103.081 53.3082 101.944 51.7553 100.767 50.2082C99.5904 48.6611 98.3744 47.1207 97.3819 45.9615C96.8857 45.3819 96.4461 44.8982 96.089 44.5517C95.9105 44.3785 95.7536 44.2397 95.6119 44.1366C95.4702 44.0335 95.3625 43.9442 95.1586 43.9442V43.9442Z"
          fill="#212121"
          fill-opacity="0.444444"
        />
        <path
          id="path1464"
          d="M81.7481 38.5969C81.3261 38.5969 80.9082 38.68 80.5183 38.8415C80.1284 39.003 79.7742 39.2397 79.4758 39.5382C79.1774 39.8366 78.9406 40.1908 78.7791 40.5807C78.6176 40.9706 78.5345 41.3885 78.5345 41.8105C78.5345 42.2325 78.6176 42.6504 78.7791 43.0403C78.9406 43.4302 79.1774 43.7845 79.4758 44.0829C79.7742 44.3813 80.1284 44.618 80.5183 44.7795C80.9082 44.941 81.3261 45.0241 81.7481 45.0241C82.1701 45.0241 82.588 44.941 82.9779 44.7795C83.3678 44.618 83.7221 44.3813 84.0205 44.0829C84.3189 43.7845 84.5556 43.4302 84.7171 43.0403C84.8786 42.6504 84.9617 42.2325 84.9617 41.8105C84.9617 41.3885 84.8786 40.9706 84.7171 40.5807C84.5556 40.1908 84.3189 39.8366 84.0205 39.5382C83.7221 39.2397 83.3678 39.003 82.9779 38.8415C82.588 38.68 82.1701 38.5969 81.7481 38.5969V38.5969ZM95.1586 44.2289C94.1073 44.2289 88.547 52.6873 87.8307 52.7294C87.1144 52.7716 83.835 48.1859 82.9939 48.1859C82.1528 48.1859 75.8011 56.352 76.1056 56.6869H104.979C105.187 56.4806 96.21 44.2289 95.1586 44.2289Z"
          fill="white"
        />
      </g>
      <path
        id="thumb-1"
        d="M50.4377 70.657H23.9082C23.1604 70.657 22.5541 71.2632 22.5541 72.011V87.2801C22.5541 88.0279 23.1604 88.6342 23.9082 88.6342H50.4377C51.1856 88.6342 51.7918 88.0279 51.7918 87.2801V72.011C51.7918 71.2632 51.1856 70.657 50.4377 70.657Z"
        fill="#737373"
      />
      <path
        id="thumb-2"
        d="M86.1946 70.657H59.6651C58.9172 70.657 58.311 71.2632 58.311 72.011V87.2801C58.311 88.0279 58.9172 88.6342 59.6651 88.6342H86.1946C86.9424 88.6342 87.5487 88.0279 87.5487 87.2801V72.011C87.5487 71.2632 86.9424 70.657 86.1946 70.657Z"
        fill="#737373"
      />
      <path
        id="thumb-3"
        d="M121.754 70.657H95.2244C94.4766 70.657 93.8703 71.2632 93.8703 72.011V87.2801C93.8703 88.0279 94.4766 88.6342 95.2244 88.6342H121.754C122.502 88.6342 123.108 88.0279 123.108 87.2801V72.011C123.108 71.2632 122.502 70.657 121.754 70.657Z"
        fill="#737373"
      />
      <path
        id="thumb-4"
        d="M156.918 70.657H130.389C129.641 70.657 129.035 71.2632 129.035 72.011V87.2801C129.035 88.0279 129.641 88.6342 130.389 88.6342H156.918C157.666 88.6342 158.272 88.0279 158.272 87.2801V72.011C158.272 71.2632 157.666 70.657 156.918 70.657Z"
        fill="#737373"
      />
      <g id="text-1">
        <path
          id="path1510"
          d="M23.1438 93.5085H50.3652"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1512"
          d="M23.1438 97.5364H50.3652"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1514"
          d="M23.1438 101.564H50.3652"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1516"
          d="M23.068 105.516H43.7379"
          stroke="#6D6D6D"
          stroke-width="1.0277"
          stroke-linecap="round"
        />
      </g>
      <g id="text-2">
        <path
          id="path1518"
          d="M58.9007 93.5085H86.1221"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1520"
          d="M58.9007 97.5364H86.1221"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1522"
          d="M58.9007 101.564H86.1221"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1524"
          d="M58.8249 105.516H79.4948"
          stroke="#6D6D6D"
          stroke-width="1.0277"
          stroke-linecap="round"
        />
      </g>
      <g id="text-3">
        <path
          id="path1526"
          d="M94.46 93.5085H121.681"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1528"
          d="M94.46 97.5364H121.681"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1530"
          d="M94.46 101.564H121.681"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1532"
          d="M94.3842 105.516H115.054"
          stroke="#6D6D6D"
          stroke-width="1.0277"
          stroke-linecap="round"
        />
      </g>
      <g id="text-4">
        <path
          id="path1534"
          d="M129.624 93.5085H156.846"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1536"
          d="M129.624 97.5364H156.846"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1538"
          d="M129.624 101.564H156.846"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1540"
          d="M129.548 105.516H150.218"
          stroke="#6D6D6D"
          stroke-width="1.0277"
          stroke-linecap="round"
        />
      </g>
      <path
        id="logo"
        d="M28.1197 26.1059C30.8297 26.1059 33.0265 23.909 33.0265 21.1991C33.0265 18.4892 30.8297 16.2924 28.1197 16.2924C25.4098 16.2924 23.213 18.4892 23.213 21.1991C23.213 23.909 25.4098 26.1059 28.1197 26.1059Z"
        fill="#808080"
      />
    </g>
  </g>
  <defs>
    <filter
      id="filter0_f"
      x="1.25006"
      y="1.25006"
      width="179.479"
      height="122.754"
      filterUnits="userSpaceOnUse"
      color-interpolation-filters="sRGB"
    >
      <feFlood flood-opacity="0" result="BackgroundImageFix" />
      <feBlend
        mode="normal"
        in="SourceGraphic"
        in2="BackgroundImageFix"
        result="shape"
      />
      <feGaussianBlur
        stdDeviation="3.12515"
        result="effect1_foregroundBlur"
      />
    </filter>
  </defs>
</svg>
  </body>
</html>

解决方法

它们不支持%scaleX()转换函数的scaleY()单位,而是将其转换为0-1范围。

(在这里快速 grep-ed ,您应该仔细检查我没有弄乱其他东西。)

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<title>responsive-anime</title>
<style>
  body {
    text-align: center;
  }

  #logo {
    display: none;
  }

  #screen {
    animation: screensize 8s ease-in infinite;
    transform-origin: center;
  }
  @keyframes screensize {
    0 {
      transform: scalex(1);
    }
    0.28 {
      transform: scalex(1);
    }
    32% {
      transform: scalex(1.3);
    }
    38% {
      transform: scalex(0.55);
    }
    58% {
      transform: scalex(0.55);
    }
    63% {
      transform: scalex(0.58);
    }

    68% {
      transform: scaley(0.7) scalex(0.25);
    }
    88% {
      transform: scaley(0.7) scalex(0.25);
    }
    93% {
      transform: scaley(0.73) scalex(0.28);
    }

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

  #path1469 {
    animation: hero 8s ease-in infinite;
    transform-origin: center;
  }
  @keyframes hero {
    0% {
      transform: scalex(1);
    }
    28% {
      transform: scalex(1);
    }
    32% {
      transform: scalex(1.3);
    }
    38% {
      transform: scalex(0.55);
    }
    58% {
      transform: scalex(0.55);
    }
    63% {
      transform: scalex(0.58);
    }

    68% {
      transform: scaley(0.7) scalex(0.25);
    }
    88% {
      transform: scaley(0.7) scalex(0.25);
    }
    93% {
      transform: scaley(0.73) scalex(0.28);
    }

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

  #path1468 {
    animation: heroimage 8s ease-in infinite;
    transform-origin: center;
  }
  @keyframes heroimage {
    0% {
      transform: scalex(1);
    }
    63% {
      transform: scalex(1);
    }
    68% {
      transform: scaley(0.5) scalex(0.5);
    }

    93% {
      transform: scaley(0.53) scalex(0.53);
    }
    100% {
      transform: scalex(1);
    }
  }

  #path1464 {
    animation: heroshadow 8s ease-in infinite;
    transform-origin: center;
  }
  @keyframes heroshadow {
    0% {
      transform: scalex(1);
    }
    63% {
      transform: scalex(1);
    }
    68% {
      transform: scaley(0.5) scalex(0.5);
    }
    93% {
      transform: scaley(0.53) scalex(0.53);
    }

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

  #thumb-4 {
    animation: thumb4 8s ease-in infinite;
    transform-origin: left;
    transform-box: fill-box;
  }
  @keyframes thumb4 {
    0% {
      transform: scalex(1);
    }
    28% {
      transform: scalex(1);
    }
    38% {
      transform: scalex(0);
    }

    93% {
      transform: scalex(0);
    }

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

  #thumb-1 {
    animation: thumb1 8s ease-in infinite;
    transform-origin: right;
    transform-box: fill-box;
  }
  @keyframes thumb1 {
    0% {
      transform: scalex(1);
    }
    28% {
      transform: scalex(1);
    }
    38% {
      transform: scalex(0);
    }

    93% {
      transform: scalex(0);
    }

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

  #text-4 {
    animation: text4 8s ease-in infinite;
    transform-origin: left;
    transform-box: fill-box;
  }
  @keyframes text4 {
    0% {
      transform: scalex(1);
    }
    28% {
      transform: scalex(1);
    }
    38% {
      transform: scalex(0);
    }

    93% {
      transform: scalex(0);
    }

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

  #text-1 {
    animation: text1 8s ease-in infinite;
    transform-origin: right;
    transform-box: fill-box;
  }
  @keyframes text1 {
    0% {
      transform: scalex(1);
    }
    28% {
      transform: scalex(1);
    }
    38% {
      transform: scalex(0);
    }

    93% {
      transform: scalex(0);
    }

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

  #thumb-2 {
    animation: thumb2 8s ease-in infinite;
    transform-origin: left;
    transform-box: fill-box;
  }
  @keyframes thumb2 {
    0% {
      transform: translatex(0);
    }

    63% {
      transform: translatex(0);
    }

    68% {
      transform: translatex(52%);
    }
    93% {
      transform: translatex(52%);
    }
    100% {
      transform: translatex(0);
    }
  }

  #thumb-3 {
    animation: thumb3 8s ease-in infinite;
    transform-origin: right;
    transform-box: fill-box;
  }
  @keyframes thumb3 {
    0% {
      transform: translatex(0);
    }

    63% {
      transform: translatex(0);
    }

    68% {
      transform: translatex(-52%);
    }
    93% {
      transform: translatex(-52%);
    }
    100% {
      transform: translatex(0);
    }
  }

  #text-3 {
    animation: text3 8s ease-in infinite;
    transform-box: fill-box;
    transform-origin: left;
  }
  @keyframes text3 {
    0% {
      transform: scalex(1);
    }
    63% {
      transform: scalex(1);
    }
    68% {
      transform: scalex(0);
    }

    93% {
      transform: scalex(0);
    }

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

  #text-2 {
    animation: text2 8s ease-in infinite;
    transform-box: fill-box;
    transform-origin: right;
  }
  @keyframes text2 {
    0% {
      transform: scalex(1);
    }
    63% {
      transform: scalex(1);
    }
    68% {
      transform: scalex(0);
    }

    93% {
      transform: scalex(0);
    }

    100% {
      transform: scalex(1);
    }
  }
</style>
  </head>
  <body>
<svg
  width="182"
  height="126"
  viewBox="0 0 182 126"
  fill="none"
  xmlns="http://www.w3.org   /2000/svg"
>
  <g id="responsive-new 1">
    <g id="layer1">
      <g id="screen">
        <g id="rect1636" filter="url(#filter0_f)">
          <path
            d="M170.283 7.50037H11.6963C9.37896 7.50037 7.50037 9.37896 7.50037 11.6963V113.558C7.50037 115.876 9.37896 117.754 11.6963 117.754H170.283C172.601 117.754 174.479 115.876 174.479 113.558V11.6963C174.479 9.37896 172.601 7.50037 170.283 7.50037Z"
            fill="#D8D8D8"
          />
        </g>
        <path
          id="rect1458"
          d="M167.991 9.09433H13.989C11.7387 9.09433 9.91441 10.9186 9.91441 13.169V112.086C9.91441 114.336 11.7387 116.16 13.989 116.16H167.991C170.241 116.16 172.065 114.336 172.065 112.086V13.169C172.065 10.9186 170.241 9.09433 167.991 9.09433Z"
          fill="white"
        />
      </g>
      <g id="image">
        <path
          id="path1469"
          d="M156.715 30.754H23.6972C22.9494 30.754 22.3432 31.3602 22.3432 32.1081V65.3717C22.3432 66.1196 22.9494 66.7258 23.6972 66.7258H156.715C157.462 66.7258 158.069 66.1196 158.069 65.3717V32.1081C158.069 31.3602 157.462 30.754 156.715 30.754Z"
          fill="#736F75"
          fill-opacity="0.546784"
        />
        <path
          id="path1468"
          opacity="0.375309"
          d="M81.7481 38.3122C80.8323 38.3122 79.922 38.6893 79.2745 39.3368C78.6269 39.9844 78.2498 40.8947 78.2499 41.8105C78.2498 42.7263 78.6269 43.6366 79.2745 44.2842C79.922 44.9318 80.8323 45.3088 81.7481 45.3088C82.6639 45.3088 83.5742 44.9318 84.2218 44.2842C84.8694 43.6366 85.2464 42.7263 85.2464 41.8105C85.2464 40.8947 84.8694 39.9844 84.2218 39.3368C83.5742 38.6893 82.6639 38.3122 81.7481 38.3122ZM95.1586 43.9442C94.9976 43.9442 94.8806 44.0067 94.7595 44.0829C94.6383 44.159 94.5146 44.2592 94.3798 44.3819C94.1101 44.6275 93.7991 44.9644 93.4549 45.366C92.7663 46.1692 91.9487 47.2301 91.1424 48.2911C90.3361 49.352 89.5415 50.4131 88.9078 51.206C88.591 51.6024 88.3135 51.9323 88.1013 52.1566C87.9952 52.2687 87.9045 52.3547 87.8416 52.405C87.8205 52.4219 87.8081 52.4257 87.7941 52.4323C87.8217 52.4259 87.7502 52.4156 87.6239 52.3197C87.4828 52.2127 87.2984 52.0439 87.0927 51.8369C86.6813 51.4228 86.1793 50.8555 85.6717 50.2846C85.1641 49.7136 84.651 49.1388 84.2031 48.6988C83.9792 48.4788 83.7723 48.2925 83.5816 48.1532C83.3908 48.0139 83.2283 47.9012 82.9939 47.9012C82.8263 47.9012 82.7321 47.9663 82.6201 48.0387C82.508 48.1111 82.3889 48.2065 82.2556 48.3242C81.989 48.5596 81.6687 48.8848 81.3104 49.2744C80.5937 50.0536 79.728 51.0884 78.8975 52.134C78.0669 53.1795 77.273 54.2344 76.7019 55.0547C76.4163 55.4649 76.1868 55.815 76.0328 56.084C75.9558 56.2185 75.8976 56.3306 75.858 56.4341C75.8381 56.4858 75.8218 56.5343 75.814 56.5981C75.8061 56.6618 75.7956 56.7692 75.895 56.8784C75.9216 56.9078 75.9542 56.9312 75.9905 56.9473C76.0267 56.9633 76.066 56.9716 76.1056 56.9715H104.979C105.054 56.9715 105.126 56.9418 105.179 56.889C105.29 56.7788 105.27 56.6781 105.264 56.6319C105.258 56.5858 105.248 56.5596 105.238 56.5334C105.219 56.4811 105.195 56.4342 105.164 56.3776C105.103 56.2644 105.015 56.1193 104.899 55.9387C104.667 55.5777 104.328 55.0804 103.913 54.4897C103.081 53.3082 101.944 51.7553 100.767 50.2082C99.5904 48.6611 98.3744 47.1207 97.3819 45.9615C96.8857 45.3819 96.4461 44.8982 96.089 44.5517C95.9105 44.3785 95.7536 44.2397 95.6119 44.1366C95.4702 44.0335 95.3625 43.9442 95.1586 43.9442V43.9442Z"
          fill="#212121"
          fill-opacity="0.444444"
        />
        <path
          id="path1464"
          d="M81.7481 38.5969C81.3261 38.5969 80.9082 38.68 80.5183 38.8415C80.1284 39.003 79.7742 39.2397 79.4758 39.5382C79.1774 39.8366 78.9406 40.1908 78.7791 40.5807C78.6176 40.9706 78.5345 41.3885 78.5345 41.8105C78.5345 42.2325 78.6176 42.6504 78.7791 43.0403C78.9406 43.4302 79.1774 43.7845 79.4758 44.0829C79.7742 44.3813 80.1284 44.618 80.5183 44.7795C80.9082 44.941 81.3261 45.0241 81.7481 45.0241C82.1701 45.0241 82.588 44.941 82.9779 44.7795C83.3678 44.618 83.7221 44.3813 84.0205 44.0829C84.3189 43.7845 84.5556 43.4302 84.7171 43.0403C84.8786 42.6504 84.9617 42.2325 84.9617 41.8105C84.9617 41.3885 84.8786 40.9706 84.7171 40.5807C84.5556 40.1908 84.3189 39.8366 84.0205 39.5382C83.7221 39.2397 83.3678 39.003 82.9779 38.8415C82.588 38.68 82.1701 38.5969 81.7481 38.5969V38.5969ZM95.1586 44.2289C94.1073 44.2289 88.547 52.6873 87.8307 52.7294C87.1144 52.7716 83.835 48.1859 82.9939 48.1859C82.1528 48.1859 75.8011 56.352 76.1056 56.6869H104.979C105.187 56.4806 96.21 44.2289 95.1586 44.2289Z"
          fill="white"
        />
      </g>
      <path
        id="thumb-1"
        d="M50.4377 70.657H23.9082C23.1604 70.657 22.5541 71.2632 22.5541 72.011V87.2801C22.5541 88.0279 23.1604 88.6342 23.9082 88.6342H50.4377C51.1856 88.6342 51.7918 88.0279 51.7918 87.2801V72.011C51.7918 71.2632 51.1856 70.657 50.4377 70.657Z"
        fill="#737373"
      />
      <path
        id="thumb-2"
        d="M86.1946 70.657H59.6651C58.9172 70.657 58.311 71.2632 58.311 72.011V87.2801C58.311 88.0279 58.9172 88.6342 59.6651 88.6342H86.1946C86.9424 88.6342 87.5487 88.0279 87.5487 87.2801V72.011C87.5487 71.2632 86.9424 70.657 86.1946 70.657Z"
        fill="#737373"
      />
      <path
        id="thumb-3"
        d="M121.754 70.657H95.2244C94.4766 70.657 93.8703 71.2632 93.8703 72.011V87.2801C93.8703 88.0279 94.4766 88.6342 95.2244 88.6342H121.754C122.502 88.6342 123.108 88.0279 123.108 87.2801V72.011C123.108 71.2632 122.502 70.657 121.754 70.657Z"
        fill="#737373"
      />
      <path
        id="thumb-4"
        d="M156.918 70.657H130.389C129.641 70.657 129.035 71.2632 129.035 72.011V87.2801C129.035 88.0279 129.641 88.6342 130.389 88.6342H156.918C157.666 88.6342 158.272 88.0279 158.272 87.2801V72.011C158.272 71.2632 157.666 70.657 156.918 70.657Z"
        fill="#737373"
      />
      <g id="text-1">
        <path
          id="path1510"
          d="M23.1438 93.5085H50.3652"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1512"
          d="M23.1438 97.5364H50.3652"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1514"
          d="M23.1438 101.564H50.3652"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1516"
          d="M23.068 105.516H43.7379"
          stroke="#6D6D6D"
          stroke-width="1.0277"
          stroke-linecap="round"
        />
      </g>
      <g id="text-2">
        <path
          id="path1518"
          d="M58.9007 93.5085H86.1221"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1520"
          d="M58.9007 97.5364H86.1221"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1522"
          d="M58.9007 101.564H86.1221"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1524"
          d="M58.8249 105.516H79.4948"
          stroke="#6D6D6D"
          stroke-width="1.0277"
          stroke-linecap="round"
        />
      </g>
      <g id="text-3">
        <path
          id="path1526"
          d="M94.46 93.5085H121.681"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1528"
          d="M94.46 97.5364H121.681"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1530"
          d="M94.46 101.564H121.681"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1532"
          d="M94.3842 105.516H115.054"
          stroke="#6D6D6D"
          stroke-width="1.0277"
          stroke-linecap="round"
        />
      </g>
      <g id="text-4">
        <path
          id="path1534"
          d="M129.624 93.5085H156.846"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1536"
          d="M129.624 97.5364H156.846"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1538"
          d="M129.624 101.564H156.846"
          stroke="#6D6D6D"
          stroke-width="1.17938"
          stroke-linecap="round"
        />
        <path
          id="path1540"
          d="M129.548 105.516H150.218"
          stroke="#6D6D6D"
          stroke-width="1.0277"
          stroke-linecap="round"
        />
      </g>
      <path
        id="logo"
        d="M28.1197 26.1059C30.8297 26.1059 33.0265 23.909 33.0265 21.1991C33.0265 18.4892 30.8297 16.2924 28.1197 16.2924C25.4098 16.2924 23.213 18.4892 23.213 21.1991C23.213 23.909 25.4098 26.1059 28.1197 26.1059Z"
        fill="#808080"
      />
    </g>
  </g>
  <defs>
    <filter
      id="filter0_f"
      x="1.25006"
      y="1.25006"
      width="179.479"
      height="122.754"
      filterUnits="userSpaceOnUse"
      color-interpolation-filters="sRGB"
    >
      <feFlood flood-opacity="0" result="BackgroundImageFix" />
      <feBlend
        mode="normal"
        in="SourceGraphic"
        in2="BackgroundImageFix"
        result="shape"
      />
      <feGaussianBlur
        stdDeviation="3.12515"
        result="effect1_foregroundBlur"
      />
    </filter>
  </defs>
</svg>
  </body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?