主页 / 问题 / 1266253
Accepted
Alexei
Asked:2022-04-05 16:16:11 +0000 UTC2022-04-05 16:16:11 +0000 UTC

如何将 svg 转换为剪辑路径？

  • 772

我需要将我的 svg 文件转换为 clip-path css 属性。有一颗多角星。

在此处输入图像描述

此图像的 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" width="143" height="146" viewBox="0 0 143 146" fill="none">
<path d="M61.0611 10.0793C62.2089 7.80603 65.2969 7.42567 66.962 9.35247L74.8594 18.4911C76.0985 19.925 78.2408 20.1439 79.7443 18.9903L89.327 11.6381C91.3475 10.088 94.2947 11.0851 94.9589 13.5436L98.1091 25.2037C98.6034 27.0332 100.439 28.16 102.294 27.773L114.117 25.3067C116.61 24.7867 118.833 26.9638 118.365 29.467L116.144 41.3393C115.795 43.2021 116.96 45.0135 118.799 45.4697L130.522 48.3778C132.994 48.9909 134.052 51.9169 132.544 53.969L125.392 63.7019C124.27 65.229 124.533 67.3663 125.992 68.5755L135.292 76.2819C137.253 77.9067 136.937 81.002 134.688 82.1966L124.021 87.8624C122.347 88.7514 121.657 90.7912 122.447 92.5138L127.483 103.492C128.544 105.807 126.917 108.458 124.372 108.559L112.303 109.036C110.409 109.11 108.903 110.649 108.867 112.543L108.641 124.62C108.593 127.166 105.976 128.848 103.639 127.835L92.559 123.028C90.8204 122.273 88.7953 123.006 87.9412 124.697L82.4975 135.479C81.3497 137.753 78.2617 138.133 76.5966 136.206L68.6992 127.067C67.4601 125.634 65.3178 125.415 63.8142 126.568L54.2315 133.92C52.2111 135.471 49.2639 134.473 48.5997 132.015L45.4495 120.355C44.9552 118.525 43.1201 117.399 41.2649 117.786L29.4412 120.252C26.9482 120.772 24.7255 118.595 25.1938 116.092L27.4147 104.219C27.7632 102.356 26.5986 100.545 24.7593 100.089L13.0364 97.1808C10.5647 96.5677 9.5067 93.6417 11.0147 91.5896L18.1669 81.8567C19.2891 80.3295 19.0258 78.1923 17.5666 76.9831L8.26632 69.2767C6.30543 67.6518 6.62176 64.5566 8.87078 63.362L19.5376 57.6962C21.2113 56.8072 21.9014 54.7673 21.1113 53.0448L16.0758 42.0663C15.0141 39.7516 16.6421 37.1001 19.1867 36.9996L31.2555 36.523C33.1491 36.4483 34.656 34.9099 34.6915 33.0151L34.918 20.939C34.9658 18.3929 37.583 16.7103 39.9192 17.7239L50.9996 22.5309C52.7382 23.2852 54.7633 22.5529 55.6174 20.8612L61.0611 10.0793Z" fill="#7A50FF"/>
</svg>

html

1 个回答

  1. Best Answer

    如果不需要旧浏览器，那么您可以只使用不带 SVG 的路径。坐标可以简单地取自dy属性path。只有它们必须是正确的大小，而不是通过viewBox或缩放scale。

    .clipped {
  padding: 50px;
  background-color: gray;
  clip-path: path('M61.0611 10.0793C62.2089 7.80603 65.2969 7.42567 66.962 9.35247L74.8594 18.4911C76.0985 19.925 78.2408 20.1439 79.7443 18.9903L89.327 11.6381C91.3475 10.088 94.2947 11.0851 94.9589 13.5436L98.1091 25.2037C98.6034 27.0332 100.439 28.16 102.294 27.773L114.117 25.3067C116.61 24.7867 118.833 26.9638 118.365 29.467L116.144 41.3393C115.795 43.2021 116.96 45.0135 118.799 45.4697L130.522 48.3778C132.994 48.9909 134.052 51.9169 132.544 53.969L125.392 63.7019C124.27 65.229 124.533 67.3663 125.992 68.5755L135.292 76.2819C137.253 77.9067 136.937 81.002 134.688 82.1966L124.021 87.8624C122.347 88.7514 121.657 90.7912 122.447 92.5138L127.483 103.492C128.544 105.807 126.917 108.458 124.372 108.559L112.303 109.036C110.409 109.11 108.903 110.649 108.867 112.543L108.641 124.62C108.593 127.166 105.976 128.848 103.639 127.835L92.559 123.028C90.8204 122.273 88.7953 123.006 87.9412 124.697L82.4975 135.479C81.3497 137.753 78.2617 138.133 76.5966 136.206L68.6992 127.067C67.4601 125.634 65.3178 125.415 63.8142 126.568L54.2315 133.92C52.2111 135.471 49.2639 134.473 48.5997 132.015L45.4495 120.355C44.9552 118.525 43.1201 117.399 41.2649 117.786L29.4412 120.252C26.9482 120.772 24.7255 118.595 25.1938 116.092L27.4147 104.219C27.7632 102.356 26.5986 100.545 24.7593 100.089L13.0364 97.1808C10.5647 96.5677 9.5067 93.6417 11.0147 91.5896L18.1669 81.8567C19.2891 80.3295 19.0258 78.1923 17.5666 76.9831L8.26632 69.2767C6.30543 67.6518 6.62176 64.5566 8.87078 63.362L19.5376 57.6962C21.2113 56.8072 21.9014 54.7673 21.1113 53.0448L16.0758 42.0663C15.0141 39.7516 16.6421 37.1001 19.1867 36.9996L31.2555 36.523C33.1491 36.4483 34.656 34.9099 34.6915 33.0151L34.918 20.939C34.9658 18.3929 37.583 16.7103 39.9192 17.7239L50.9996 22.5309C52.7382 23.2852 54.7633 22.5529 55.6174 20.8612L61.0611 10.0793Z');
}
    <div class="clipped">123</div>

    这适用于使用 SVG 的旧版浏览器：

    .clipped {
  padding: 50px;
  background-color: gray;
  clip-path: url(#clip-path);
}
    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <clipPath id="clip-path">
    <path d="M61.0611 10.0793C62.2089 7.80603 65.2969 7.42567 66.962 9.35247L74.8594 18.4911C76.0985 19.925 78.2408 20.1439 79.7443 18.9903L89.327 11.6381C91.3475 10.088 94.2947 11.0851 94.9589 13.5436L98.1091 25.2037C98.6034 27.0332 100.439 28.16 102.294 27.773L114.117 25.3067C116.61 24.7867 118.833 26.9638 118.365 29.467L116.144 41.3393C115.795 43.2021 116.96 45.0135 118.799 45.4697L130.522 48.3778C132.994 48.9909 134.052 51.9169 132.544 53.969L125.392 63.7019C124.27 65.229 124.533 67.3663 125.992 68.5755L135.292 76.2819C137.253 77.9067 136.937 81.002 134.688 82.1966L124.021 87.8624C122.347 88.7514 121.657 90.7912 122.447 92.5138L127.483 103.492C128.544 105.807 126.917 108.458 124.372 108.559L112.303 109.036C110.409 109.11 108.903 110.649 108.867 112.543L108.641 124.62C108.593 127.166 105.976 128.848 103.639 127.835L92.559 123.028C90.8204 122.273 88.7953 123.006 87.9412 124.697L82.4975 135.479C81.3497 137.753 78.2617 138.133 76.5966 136.206L68.6992 127.067C67.4601 125.634 65.3178 125.415 63.8142 126.568L54.2315 133.92C52.2111 135.471 49.2639 134.473 48.5997 132.015L45.4495 120.355C44.9552 118.525 43.1201 117.399 41.2649 117.786L29.4412 120.252C26.9482 120.772 24.7255 118.595 25.1938 116.092L27.4147 104.219C27.7632 102.356 26.5986 100.545 24.7593 100.089L13.0364 97.1808C10.5647 96.5677 9.5067 93.6417 11.0147 91.5896L18.1669 81.8567C19.2891 80.3295 19.0258 78.1923 17.5666 76.9831L8.26632 69.2767C6.30543 67.6518 6.62176 64.5566 8.87078 63.362L19.5376 57.6962C21.2113 56.8072 21.9014 54.7673 21.1113 53.0448L16.0758 42.0663C15.0141 39.7516 16.6421 37.1001 19.1867 36.9996L31.2555 36.523C33.1491 36.4483 34.656 34.9099 34.6915 33.0151L34.918 20.939C34.9658 18.3929 37.583 16.7103 39.9192 17.7239L50.9996 22.5309C52.7382 23.2852 54.7633 22.5529 55.6174 20.8612L61.0611 10.0793Z" />
  </clipPath>
</svg>


<div class="clipped">123</div>

    • 2

相关问题