给svg设置stroke-dasharray无效?

发布于 2022-09-13 01:25:58 字数 8902 浏览 45 评论 0

从阿里图标上下载下来的svg图,如下
<svg t="1631526231930" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7885" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">

<defs>
  <style type="text/css"></style>
</defs>
<path d="M940.585707 0H84.949525C38.38081 0 0 38.38081 0 83.414293v854.100949c0 45.033483 38.38081 86.484758 84.949525 86.484758h854.10095c46.568716 0 84.949525-38.38081 84.949525-84.949525V83.414293c1.023488-45.033483-37.357321-83.414293-83.414293-83.414293z" fill="#3581FB" p-id="7886"></path>

<path stroke-dasharray='100 200' d="M620.745627 778.874563c-4.093953-4.093953-8.69965-4.093953-12.793603-2.046977-30.192904 10.746627-62.432784 17.3993-94.672664 17.399301-157.105447-2.046977-281.971014-128.95952-281.971014-284.017991 0-32.23988 6.652674-64.47976 17.3993-94.672664 2.046977-4.093953 0-8.69965-2.046976-12.793603l-28.145927-28.145927c-2.046977-2.046977-6.652674-4.093953-10.746627-4.093953s-6.652674 4.093953-8.69965 6.652673c-17.3993 40.93953-25.587206 85.973013-25.587207 131.006497 0 62.432784 17.3993 122.818591 49.639181 176.551724l-45.033483-21.493253c-4.093953-2.046977-10.746627 0-14.84058 4.093953-4.093953 4.093953-2.046977 10.746627 2.046976 14.84058l176.551724 176.551724c2.046977 2.046977 6.652674 4.093953 8.699651 4.093953 2.046977 0 4.093953 0 6.652673-2.046977 4.093953-4.093953 6.652674-10.746627 4.093953-14.84058l-21.493253-45.033483c92.625687 55.78011 210.838581 66.526737 309.605197 23.54023 4.093953-2.046977 6.652674-4.093953 6.652674-8.69965 0-4.093953 0-8.69965-4.093953-10.746627l-31.216392-26.09895z m243.078461-424.235882c4.093953-4.093953 2.046977-10.746627-2.046977-14.84058l-176.551724-176.551724c-4.093953-4.093953-10.746627-4.093953-14.840579-2.046977-4.093953 4.093953-6.652674 10.746627-4.093953 14.84058l17.3993 36.333833c-51.686157-30.192904-109.513243-45.033483-171.946027-45.033483-45.033483 0-90.578711 8.69965-131.006497 25.587206-4.093953 2.046977-6.652674 4.093953-6.652673 8.69965 0 4.093953 0 8.69965 4.093953 10.746627l28.145927 28.145927c4.093953 4.093953 8.69965 4.093953 12.793603 2.046977 30.192904-10.746627 62.432784-17.3993 94.672663-17.399301 155.058471 0 281.971014 126.912544 281.971015 281.971015 0 32.23988-6.652674 64.47976-17.3993 94.672663-2.046977 4.093953 0 8.69965 2.046976 12.793604l28.145927 28.145927c2.046977 2.046977 6.652674 4.093953 8.69965 4.093953h2.046977c4.093953 0 6.652674-4.093953 8.69965-6.652674 17.3993-40.93953 25.587206-85.973013 25.587206-131.006497 0-60.385807-14.84058-118.212894-45.033483-167.852074l38.892554 19.446277c5.629185 0.511744 12.281859 0.511744 16.375812-6.140929z" fill="#FFFFFF" ></path>

<path d="M676.525737 170.410795c0.511744 0 1.023488 0 1.535233 0.511744L854.612694 347.474263c0.511744 0.511744 1.023488 1.023488 1.023488 1.535232 0 0 0 0.511744-0.511744 0.511744-0.511744 1.023488-1.535232 1.535232-5.629186 1.535233l-36.333833-18.422789c-1.535232-0.511744-3.070465-1.023488-4.605697-1.023488-3.070465 0-5.629185 1.023488-7.676162 3.582209-3.070465 3.582209-3.582209 8.69965-1.023488 12.793603 28.657671 47.08046 43.498251 102.86057 43.498251 162.222889 0 43.498251-8.187906 86.996502-24.563718 125.377311 0 0.511744-0.511744 0.511744-0.511744 1.023488l-0.511745 0.511744c-0.511744-0.511744-1.535232-0.511744-1.535232-1.023488l-26.610695-26.610695c-0.511744-1.023488-1.023488-2.046977-1.023488-2.55872v-0.511744c11.770115-33.263368 17.911044-66.014993 17.911045-98.254873 0-161.1994-131.006497-292.717641-292.717642-292.717641-32.23988 0-64.991504 6.14093-98.254872 17.911044-0.511744 0-1.023488 0.511744-1.023488 0.511744h-0.511744l-0.511745-0.511744-28.145927-28.145927-1.023488-1.023488v-1.023488h0.511744c38.892554-16.375812 82.390805-25.075462 126.912544-25.075462 60.897551 0 117.189405 14.84058 166.828586 43.49825 1.535232 1.023488 3.582209 1.535232 5.117441 1.535233 2.558721 0 5.117441-1.023488 7.164418-2.558721 3.582209-3.070465 4.605697-8.187906 2.55872-12.281859l-16.887556-36.333833c-0.511744 0-0.511744-0.511744 0-1.535232M209.303348 380.737631c0.511744 0.511744 1.535232 0.511744 1.535233 1.023488l26.610694 26.610695c0.511744 1.023488 1.023488 2.046977 1.023489 2.558721v0.511744c-11.770115 33.263368-17.911044 66.014993-17.911045 98.254872 0 160.175912 131.006497 292.205897 292.717641 294.764618 32.23988 0 64.991504-6.14093 98.254873-17.911044 0.511744 0 1.023488-0.511744 1.023488-0.511744h0.511744l0.511744 0.511744 0.511745 0.511744 30.192903 25.587206 0.511744 0.511744v1.023489h-0.511744c-38.892554 16.887556-80.855572 25.587206-124.865567 25.587206-61.921039 0-122.306847-16.887556-174.504748-48.615692-1.535232-1.023488-3.582209-1.535232-5.629185-1.535233-2.558721 0-5.117441 1.023488-7.164418 2.558721-3.582209 3.070465-4.605697 8.187906-2.558721 12.281859l21.493254 44.521739c0 0.511744-0.511744 1.023488-1.023488 2.046977-0.511744-0.511744-1.023488-0.511744-1.023489-0.511744l-176.551724-176.551725-1.023488-1.023488c1.023488-0.511744 1.535232-1.023488 2.046976-1.023488l44.52174 21.493253c1.535232 0.511744 3.070465 1.023488 4.605697 1.023489 3.070465 0 5.629185-1.023488 7.676162-3.582209 3.070465-3.582209 3.582209-8.69965 1.023488-12.793603-31.216392-52.197901-48.103948-111.56022-48.103948-170.922539 0-43.498251 8.187906-86.996502 24.563718-125.377312 1.023488 0 1.023488 0 1.535232-1.023488 0 0.511744 0 0.511744 0 0m467.222389-221.073463c-2.046977 0-4.605697 0.511744-6.140929 1.535232-4.093953 4.093953-6.652674 10.746627-4.093953 14.84058l17.3993 36.333833c-51.686157-30.192904-109.513243-45.033483-171.946027-45.033483-45.033483 0-90.578711 8.69965-131.006497 25.587206-4.093953 2.046977-6.652674 4.093953-6.652673 8.69965 0 4.093953 0 8.69965 4.093953 10.746627l28.145927 28.145927c2.558721 2.558721 5.117441 3.582209 7.676162 3.582209 1.535232 0 3.582209-0.511744 5.117441-1.535232 30.192904-10.746627 62.432784-17.3993 94.672663-17.399301 155.058471 0 281.971014 126.912544 281.971015 281.971015 0 32.23988-6.652674 64.47976-17.3993 94.672663-2.046977 4.093953 0 8.69965 2.046976 12.793604l28.145927 28.145927c2.046977 2.046977 6.652674 4.093953 8.69965 4.093953h2.046977c4.093953 0 6.652674-4.093953 8.69965-6.652674 17.3993-40.93953 25.587206-85.973013 25.587206-131.006497 0-60.385807-14.84058-118.212894-45.033483-167.852074l38.892554 19.446277c6.652674 0 12.793603 0 17.3993-6.652673 4.093953-4.093953 2.046977-10.746627-2.046976-14.84058l-176.551724-176.551724c-3.070465-2.046977-6.652674-3.070465-9.723139-3.070465z m187.298351 194.974513z m-656.055972 15.352323c-4.093953 0-6.652674 4.093953-8.69965 6.652674-17.3993 40.93953-25.587206 85.973013-25.587207 131.006497 0 62.432784 17.3993 122.818591 49.639181 176.551724l-45.033483-21.493253c-1.023488-0.511744-2.558721-1.023488-4.093954-1.023489-3.582209 0-8.187906 2.046977-11.25837 5.117442-4.093953 4.093953-2.046977 10.746627 2.046976 14.840579l176.551724 176.551725c2.046977 2.046977 6.652674 4.093953 8.699651 4.093953 2.046977 0 4.093953 0 6.652673-2.046977 4.093953-4.093953 6.652674-10.746627 4.093953-14.84058l-21.493253-45.033483c54.244878 32.751624 117.189405 50.150925 180.133933 50.150925 44.521739 0 88.531734-8.69965 129.471264-26.610695 4.093953-2.046977 6.652674-4.093953 6.652674-8.69965 0-4.093953 0-8.69965-4.093953-10.746627l-30.192904-25.587206c-2.558721-2.558721-5.117441-3.582209-7.676162-3.582209-1.535232 0-3.582209 0.511744-5.117441 1.535232-30.192904 10.746627-62.432784 17.3993-94.672664 17.399301-157.105447-2.046977-281.971014-128.95952-281.971014-284.017991 0-32.23988 6.652674-64.47976 17.3993-94.672664 2.046977-4.093953 0-8.69965-2.046976-12.793603l-28.145927-28.145927c-2.558721-2.558721-6.652674-4.605697-11.258371-4.605698z" fill="#FFFFFF" p-id="7888"></path>
<path d="M511.744128 755.334333c-134.588706 0-244.101949-109.513243-244.101949-244.101949S377.155422 266.618691 511.744128 266.618691s244.101949 109.513243 244.101949 244.101949-109.513243 244.613693-244.101949 244.613693z m0-458.010995c-117.701149 0-213.397301 95.696152-213.397301 213.397302S394.042979 724.629685 511.744128 724.629685s213.397301-95.696152 213.397301-213.397301S629.445277 297.323338 511.744128 297.323338z" fill="#FFFFFF" opacity=".67" p-id="7889"></path>
<path id="path" d="M511.744128 676.525737c-91.090455 0-164.781609-73.691154-164.781609-164.781609S420.653673 346.962519 511.744128 346.962519s164.781609 73.691154 164.781609 164.781609-73.691154 164.781609-164.781609 164.781609z m-44.521739-249.731134l-63.968016 167.852074h27.122439l15.864068-42.986507h72.155922l15.864068 42.986507h25.587206L495.88006 426.794603h-28.657671z m110.024987 0v167.852074h25.587207V426.794603h-25.587207z m-124.865567 103.884058L479.504248 455.452274h1.535232l27.122439 75.226387H452.381809z" fill="#FFFFFF" p-id="7890"></path>

</svg>
给path设置stroke-dasharray来制作动画不起作用?啥原因呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文