使用clipPath可以改变SVG路径的大小

问题描述 投票：0回答：1

我遇到了一个问题，当我对其应用 

clipPath
时，我的 SVG 会缩小。尽管将 
clipPathUnits
 设置为 
userSpaceOnUse
 以确保剪辑路径坐标与 SVG 的 
viewBox
 对齐，但 SVG 的大小似乎显着减小。这是我正在使用的代码：

<html>
    <head>
        <style>
            svg {
                background: linear-gradient(-45deg,#279a94,#a79353,#ff8e26,#db5157,#0077f2);
                clip-path: url(#myClip);
            }
        </style>
    </head>
    <body>
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
    <clipPath id="myClip" clipPathUnits="userSpaceOnUse">
        <path d="M 164.305 329.606 L 164.305 350.016 C 164.305 368.136 181.085 374.836 199.205 374.836 L 221.265 374.836 C 224.165 401.206 228.255 398.846 228.255 410.216 C 228.255 410.216 228.255 415.586 232.135 415.586 L 233.475 415.586 C 237.355 415.586 237.355 410.216 237.355 410.216 C 237.355 398.786 241.485 401.206 244.385 374.836 L 265.105 374.836 C 283.225 374.836 303.365 368.136 303.365 350.016 L 303.365 330.126 C 260.215 334.896 205.075 334.716 164.315 329.606 L 164.305 329.606 Z" />
        <path d="M 164.305 265.316 L 164.305 294.856 C 205.065 300.076 260.205 300.256 303.355 295.376 L 303.355 265.456 C 279.385 266.756 258.085 267.446 234.955 267.446 C 211.825 267.446 185.885 266.706 164.305 265.316 Z" />
        <path d="M 303.355 230.126 L 303.355 196.256 C 303.355 184.256 293.355 173.736 283.695 167.966 L 298.065 141.276 C 302.585 133.786 299.285 123.956 291.795 119.436 C 284.305 114.916 274.045 111.626 269.525 119.116 L 245.875 151.866 L 217.465 151.866 L 194.245 119.116 C 189.725 111.626 179.895 112.056 172.405 116.576 C 164.915 121.096 162.485 132.356 167.005 139.846 L 182.375 166.266 C 171.755 171.756 164.295 183.536 164.295 196.256 L 164.295 229.606 C 205.055 234.826 260.195 235.006 303.345 230.126 L 303.355 230.126 Z" />
        <path d="M 149.915 347.076 L 143.555 353.486 L 141.985 355.376 C 134.375 363.726 123.485 368.506 112.085 368.506 C 101.975 368.506 92.325 364.786 84.905 358.026 C 76.965 350.796 72.325 340.846 71.815 330.026 C 71.315 319.196 75.015 308.866 82.255 300.926 L 115.085 261.416 L 149.925 219.496 L 149.925 196.246 C 149.925 186.916 153.115 177.656 158.505 169.886 L 83.895 257.766 L 60.705 285.076 C 49.235 297.656 45.445 314.006 46.235 331.116 C 47.035 348.226 55.445 363.956 68.025 375.426 C 79.785 386.146 95.595 392.046 111.585 392.046 C 126.605 392.046 141.345 386.756 152.735 377.326 L 157.675 372.336 C 152.725 366.216 149.925 358.646 149.925 350.006 L 149.925 347.076 L 149.915 347.076 Z" />
        <path d="M 404.755 285.086 L 381.785 258.036 L 306.865 169.896 C 312.255 177.666 315.335 186.936 315.335 196.256 L 315.335 219.506 L 350.435 261.626 L 383.175 300.936 C 390.405 308.876 394.125 319.206 393.625 330.036 C 393.125 340.856 388.475 350.806 380.545 358.036 C 373.125 364.796 363.475 368.516 353.365 368.516 C 341.965 368.516 331.055 363.726 323.455 355.386 L 321.805 353.496 L 315.335 347.086 L 315.335 350.016 C 315.335 358.656 312.645 366.226 307.695 372.346 L 312.715 377.336 C 324.105 386.766 338.855 392.056 353.875 392.056 C 369.865 392.056 385.675 386.156 397.435 375.436 C 410.015 363.966 418.425 348.236 419.225 331.126 C 420.025 314.016 416.215 297.666 404.755 285.086 Z" />
        <path d="M 370.909 171.859 C 368.735 171.87 366.782 170.532 366.008 168.5 L 357.643 146.746 C 357.3 145.86 356.6 145.159 355.713 144.817 L 333.953 136.445 C 330.181 134.997 329.391 130.008 332.531 127.465 C 332.959 127.118 333.439 126.841 333.953 126.643 L 355.707 118.278 C 356.593 117.935 357.294 117.235 357.636 116.348 L 366.008 94.589 C 367.456 90.816 372.445 90.026 374.988 93.166 C 375.335 93.594 375.612 94.074 375.809 94.589 L 384.175 116.342 C 384.517 117.229 385.219 117.929 386.105 118.272 L 407.732 126.593 C 409.845 127.376 411.241 129.4 411.224 131.653 C 411.191 133.788 409.86 135.687 407.864 136.445 L 386.111 144.811 C 385.225 145.153 384.524 145.854 384.181 146.74 L 375.809 168.5 C 375.036 170.532 373.083 171.87 370.909 171.859 Z M 384.946 118.349 Z" />
        <path d="M 422.669 228.25 C 421.111 228.258 419.712 227.299 419.157 225.843 L 413.162 210.252 C 412.916 209.617 412.415 209.115 411.779 208.87 L 396.184 202.87 C 393.481 201.832 392.915 198.257 395.165 196.434 C 395.472 196.186 395.816 195.987 396.184 195.845 L 411.775 189.85 C 412.41 189.604 412.912 189.103 413.157 188.467 L 419.157 172.873 C 420.195 170.169 423.77 169.603 425.593 171.853 C 425.841 172.16 426.04 172.504 426.181 172.873 L 432.177 188.463 C 432.422 189.098 432.925 189.6 433.56 189.846 L 449.059 195.809 C 450.574 196.37 451.574 197.821 451.562 199.436 C 451.538 200.966 450.584 202.327 449.154 202.87 L 433.564 208.866 C 432.929 209.111 432.427 209.613 432.181 210.248 L 426.181 225.843 C 425.627 227.299 424.228 228.258 422.669 228.25 Z M 432.729 189.901 Z" />
    </clipPath>
</svg>

</body>

</html>

请注意，如果我删除 

clipPath
节点，它会显示不同的大小。

<html>
    <head>
    </head>
    <body>
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
    <path d="M 164.305 329.606 L 164.305 350.016 C 164.305 368.136 181.085 374.836 199.205 374.836 L 221.265 374.836 C 224.165 401.206 228.255 398.846 228.255 410.216 C 228.255 410.216 228.255 415.586 232.135 415.586 L 233.475 415.586 C 237.355 415.586 237.355 410.216 237.355 410.216 C 237.355 398.786 241.485 401.206 244.385 374.836 L 265.105 374.836 C 283.225 374.836 303.365 368.136 303.365 350.016 L 303.365 330.126 C 260.215 334.896 205.075 334.716 164.315 329.606 L 164.305 329.606 Z" />
    <path d="M 164.305 265.316 L 164.305 294.856 C 205.065 300.076 260.205 300.256 303.355 295.376 L 303.355 265.456 C 279.385 266.756 258.085 267.446 234.955 267.446 C 211.825 267.446 185.885 266.706 164.305 265.316 Z" />
    <path d="M 303.355 230.126 L 303.355 196.256 C 303.355 184.256 293.355 173.736 283.695 167.966 L 298.065 141.276 C 302.585 133.786 299.285 123.956 291.795 119.436 C 284.305 114.916 274.045 111.626 269.525 119.116 L 245.875 151.866 L 217.465 151.866 L 194.245 119.116 C 189.725 111.626 179.895 112.056 172.405 116.576 C 164.915 121.096 162.485 132.356 167.005 139.846 L 182.375 166.266 C 171.755 171.756 164.295 183.536 164.295 196.256 L 164.295 229.606 C 205.055 234.826 260.195 235.006 303.345 230.126 L 303.355 230.126 Z" />
    <path d="M 149.915 347.076 L 143.555 353.486 L 141.985 355.376 C 134.375 363.726 123.485 368.506 112.085 368.506 C 101.975 368.506 92.325 364.786 84.905 358.026 C 76.965 350.796 72.325 340.846 71.815 330.026 C 71.315 319.196 75.015 308.866 82.255 300.926 L 115.085 261.416 L 149.925 219.496 L 149.925 196.246 C 149.925 186.916 153.115 177.656 158.505 169.886 L 83.895 257.766 L 60.705 285.076 C 49.235 297.656 45.445 314.006 46.235 331.116 C 47.035 348.226 55.445 363.956 68.025 375.426 C 79.785 386.146 95.595 392.046 111.585 392.046 C 126.605 392.046 141.345 386.756 152.735 377.326 L 157.675 372.336 C 152.725 366.216 149.925 358.646 149.925 350.006 L 149.925 347.076 L 149.915 347.076 Z" />
    <path d="M 404.755 285.086 L 381.785 258.036 L 306.865 169.896 C 312.255 177.666 315.335 186.936 315.335 196.256 L 315.335 219.506 L 350.435 261.626 L 383.175 300.936 C 390.405 308.876 394.125 319.206 393.625 330.036 C 393.125 340.856 388.475 350.806 380.545 358.036 C 373.125 364.796 363.475 368.516 353.365 368.516 C 341.965 368.516 331.055 363.726 323.455 355.386 L 321.805 353.496 L 315.335 347.086 L 315.335 350.016 C 315.335 358.656 312.645 366.226 307.695 372.346 L 312.715 377.336 C 324.105 386.766 338.855 392.056 353.875 392.056 C 369.865 392.056 385.675 386.156 397.435 375.436 C 410.015 363.966 418.425 348.236 419.225 331.126 C 420.025 314.016 416.215 297.666 404.755 285.086 Z" />
    <path d="M 370.909 171.859 C 368.735 171.87 366.782 170.532 366.008 168.5 L 357.643 146.746 C 357.3 145.86 356.6 145.159 355.713 144.817 L 333.953 136.445 C 330.181 134.997 329.391 130.008 332.531 127.465 C 332.959 127.118 333.439 126.841 333.953 126.643 L 355.707 118.278 C 356.593 117.935 357.294 117.235 357.636 116.348 L 366.008 94.589 C 367.456 90.816 372.445 90.026 374.988 93.166 C 375.335 93.594 375.612 94.074 375.809 94.589 L 384.175 116.342 C 384.517 117.229 385.219 117.929 386.105 118.272 L 407.732 126.593 C 409.845 127.376 411.241 129.4 411.224 131.653 C 411.191 133.788 409.86 135.687 407.864 136.445 L 386.111 144.811 C 385.225 145.153 384.524 145.854 384.181 146.74 L 375.809 168.5 C 375.036 170.532 373.083 171.87 370.909 171.859 Z M 384.946 118.349 Z" />
    <path d="M 422.669 228.25 C 421.111 228.258 419.712 227.299 419.157 225.843 L 413.162 210.252 C 412.916 209.617 412.415 209.115 411.779 208.87 L 396.184 202.87 C 393.481 201.832 392.915 198.257 395.165 196.434 C 395.472 196.186 395.816 195.987 396.184 195.845 L 411.775 189.85 C 412.41 189.604 412.912 189.103 413.157 188.467 L 419.157 172.873 C 420.195 170.169 423.77 169.603 425.593 171.853 C 425.841 172.16 426.04 172.504 426.181 172.873 L 432.177 188.463 C 432.422 189.098 432.925 189.6 433.56 189.846 L 449.059 195.809 C 450.574 196.37 451.574 197.821 451.562 199.436 C 451.538 200.966 450.584 202.327 449.154 202.87 L 433.564 208.866 C 432.929 209.111 432.427 209.613 432.181 210.248 L 426.181 225.843 C 425.627 227.299 424.228 228.258 422.669 228.25 Z M 432.729 189.901 Z" />
</svg>

</body>

</html>

我尝试过更改 CSS 和其他属性来使 

clipPath
尊重 
viewBox
，但我还没有弄清楚。

svg clip-path
1个回答
0
投票

剪辑路径很烦人。在 CSS 中定义时，它们并不那么灵活。它们不会缩放，因此需要具有精确的尺寸。

我有两个建议。使用 SVG 图像（整个图像，而不是遮罩或剪辑路径）作为 CSS mask-image（可以是像此处这样的数据 URI，也可以是对 SVG 文件的引用）。 CSS 掩码具有不同的 CSS 属性，例如掩码大小、掩码位置、掩码重复等，可用于设置 HTML 元素的正确掩码。

另一个建议是使用 SVG 中图标的剪辑路径，然后用它来剪辑 SVG 中的矩形。然后在 SVG 中定义线性渐变。

body {
  display: flex;
}

svg, div {
  width: 300px;
  height: 300px;
}

.clipped {
  background: linear-gradient(-45deg, #279a94, #a79353, #ff8e26, #db5157, #0077f2);
  mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNIDE2NC4zMDUgMzI5LjYwNiBMIDE2NC4zMDUgMzUwLjAxNiBDIDE2NC4zMDUgMzY4LjEzNiAxODEuMDg1IDM3NC44MzYgMTk5LjIwNSAzNzQuODM2IEwgMjIxLjI2NSAzNzQuODM2IEMgMjI0LjE2NSA0MDEuMjA2IDIyOC4yNTUgMzk4Ljg0NiAyMjguMjU1IDQxMC4yMTYgQyAyMjguMjU1IDQxMC4yMTYgMjI4LjI1NSA0MTUuNTg2IDIzMi4xMzUgNDE1LjU4NiBMIDIzMy40NzUgNDE1LjU4NiBDIDIzNy4zNTUgNDE1LjU4NiAyMzcuMzU1IDQxMC4yMTYgMjM3LjM1NSA0MTAuMjE2IEMgMjM3LjM1NSAzOTguNzg2IDI0MS40ODUgNDAxLjIwNiAyNDQuMzg1IDM3NC44MzYgTCAyNjUuMTA1IDM3NC44MzYgQyAyODMuMjI1IDM3NC44MzYgMzAzLjM2NSAzNjguMTM2IDMwMy4zNjUgMzUwLjAxNiBMIDMwMy4zNjUgMzMwLjEyNiBDIDI2MC4yMTUgMzM0Ljg5NiAyMDUuMDc1IDMzNC43MTYgMTY0LjMxNSAzMjkuNjA2IEwgMTY0LjMwNSAzMjkuNjA2IFoiIC8+CiAgICAgICAgPHBhdGggZD0iTSAxNjQuMzA1IDI2NS4zMTYgTCAxNjQuMzA1IDI5NC44NTYgQyAyMDUuMDY1IDMwMC4wNzYgMjYwLjIwNSAzMDAuMjU2IDMwMy4zNTUgMjk1LjM3NiBMIDMwMy4zNTUgMjY1LjQ1NiBDIDI3OS4zODUgMjY2Ljc1NiAyNTguMDg1IDI2Ny40NDYgMjM0Ljk1NSAyNjcuNDQ2IEMgMjExLjgyNSAyNjcuNDQ2IDE4NS44ODUgMjY2LjcwNiAxNjQuMzA1IDI2NS4zMTYgWiIgLz4KICAgICAgICA8cGF0aCBkPSJNIDMwMy4zNTUgMjMwLjEyNiBMIDMwMy4zNTUgMTk2LjI1NiBDIDMwMy4zNTUgMTg0LjI1NiAyOTMuMzU1IDE3My43MzYgMjgzLjY5NSAxNjcuOTY2IEwgMjk4LjA2NSAxNDEuMjc2IEMgMzAyLjU4NSAxMzMuNzg2IDI5OS4yODUgMTIzLjk1NiAyOTEuNzk1IDExOS40MzYgQyAyODQuMzA1IDExNC45MTYgMjc0LjA0NSAxMTEuNjI2IDI2OS41MjUgMTE5LjExNiBMIDI0NS44NzUgMTUxLjg2NiBMIDIxNy40NjUgMTUxLjg2NiBMIDE5NC4yNDUgMTE5LjExNiBDIDE4OS43MjUgMTExLjYyNiAxNzkuODk1IDExMi4wNTYgMTcyLjQwNSAxMTYuNTc2IEMgMTY0LjkxNSAxMjEuMDk2IDE2Mi40ODUgMTMyLjM1NiAxNjcuMDA1IDEzOS44NDYgTCAxODIuMzc1IDE2Ni4yNjYgQyAxNzEuNzU1IDE3MS43NTYgMTY0LjI5NSAxODMuNTM2IDE2NC4yOTUgMTk2LjI1NiBMIDE2NC4yOTUgMjI5LjYwNiBDIDIwNS4wNTUgMjM0LjgyNiAyNjAuMTk1IDIzNS4wMDYgMzAzLjM0NSAyMzAuMTI2IEwgMzAzLjM1NSAyMzAuMTI2IFoiIC8+CiAgICAgICAgPHBhdGggZD0iTSAxNDkuOTE1IDM0Ny4wNzYgTCAxNDMuNTU1IDM1My40ODYgTCAxNDEuOTg1IDM1NS4zNzYgQyAxMzQuMzc1IDM2My43MjYgMTIzLjQ4NSAzNjguNTA2IDExMi4wODUgMzY4LjUwNiBDIDEwMS45NzUgMzY4LjUwNiA5Mi4zMjUgMzY0Ljc4NiA4NC45MDUgMzU4LjAyNiBDIDc2Ljk2NSAzNTAuNzk2IDcyLjMyNSAzNDAuODQ2IDcxLjgxNSAzMzAuMDI2IEMgNzEuMzE1IDMxOS4xOTYgNzUuMDE1IDMwOC44NjYgODIuMjU1IDMwMC45MjYgTCAxMTUuMDg1IDI2MS40MTYgTCAxNDkuOTI1IDIxOS40OTYgTCAxNDkuOTI1IDE5Ni4yNDYgQyAxNDkuOTI1IDE4Ni45MTYgMTUzLjExNSAxNzcuNjU2IDE1OC41MDUgMTY5Ljg4NiBMIDgzLjg5NSAyNTcuNzY2IEwgNjAuNzA1IDI4NS4wNzYgQyA0OS4yMzUgMjk3LjY1NiA0NS40NDUgMzE0LjAwNiA0Ni4yMzUgMzMxLjExNiBDIDQ3LjAzNSAzNDguMjI2IDU1LjQ0NSAzNjMuOTU2IDY4LjAyNSAzNzUuNDI2IEMgNzkuNzg1IDM4Ni4xNDYgOTUuNTk1IDM5Mi4wNDYgMTExLjU4NSAzOTIuMDQ2IEMgMTI2LjYwNSAzOTIuMDQ2IDE0MS4zNDUgMzg2Ljc1NiAxNTIuNzM1IDM3Ny4zMjYgTCAxNTcuNjc1IDM3Mi4zMzYgQyAxNTIuNzI1IDM2Ni4yMTYgMTQ5LjkyNSAzNTguNjQ2IDE0OS45MjUgMzUwLjAwNiBMIDE0OS45MjUgMzQ3LjA3NiBMIDE0OS45MTUgMzQ3LjA3NiBaIiAvPgogICAgICAgIDxwYXRoIGQ9Ik0gNDA0Ljc1NSAyODUuMDg2IEwgMzgxLjc4NSAyNTguMDM2IEwgMzA2Ljg2NSAxNjkuODk2IEMgMzEyLjI1NSAxNzcuNjY2IDMxNS4zMzUgMTg2LjkzNiAzMTUuMzM1IDE5Ni4yNTYgTCAzMTUuMzM1IDIxOS41MDYgTCAzNTAuNDM1IDI2MS42MjYgTCAzODMuMTc1IDMwMC45MzYgQyAzOTAuNDA1IDMwOC44NzYgMzk0LjEyNSAzMTkuMjA2IDM5My42MjUgMzMwLjAzNiBDIDM5My4xMjUgMzQwLjg1NiAzODguNDc1IDM1MC44MDYgMzgwLjU0NSAzNTguMDM2IEMgMzczLjEyNSAzNjQuNzk2IDM2My40NzUgMzY4LjUxNiAzNTMuMzY1IDM2OC41MTYgQyAzNDEuOTY1IDM2OC41MTYgMzMxLjA1NSAzNjMuNzI2IDMyMy40NTUgMzU1LjM4NiBMIDMyMS44MDUgMzUzLjQ5NiBMIDMxNS4zMzUgMzQ3LjA4NiBMIDMxNS4zMzUgMzUwLjAxNiBDIDMxNS4zMzUgMzU4LjY1NiAzMTIuNjQ1IDM2Ni4yMjYgMzA3LjY5NSAzNzIuMzQ2IEwgMzEyLjcxNSAzNzcuMzM2IEMgMzI0LjEwNSAzODYuNzY2IDMzOC44NTUgMzkyLjA1NiAzNTMuODc1IDM5Mi4wNTYgQyAzNjkuODY1IDM5Mi4wNTYgMzg1LjY3NSAzODYuMTU2IDM5Ny40MzUgMzc1LjQzNiBDIDQxMC4wMTUgMzYzLjk2NiA0MTguNDI1IDM0OC4yMzYgNDE5LjIyNSAzMzEuMTI2IEMgNDIwLjAyNSAzMTQuMDE2IDQxNi4yMTUgMjk3LjY2NiA0MDQuNzU1IDI4NS4wODYgWiIgLz4KICAgICAgICA8cGF0aCBkPSJNIDM3MC45MDkgMTcxLjg1OSBDIDM2OC43MzUgMTcxLjg3IDM2Ni43ODIgMTcwLjUzMiAzNjYuMDA4IDE2OC41IEwgMzU3LjY0MyAxNDYuNzQ2IEMgMzU3LjMgMTQ1Ljg2IDM1Ni42IDE0NS4xNTkgMzU1LjcxMyAxNDQuODE3IEwgMzMzLjk1MyAxMzYuNDQ1IEMgMzMwLjE4MSAxMzQuOTk3IDMyOS4zOTEgMTMwLjAwOCAzMzIuNTMxIDEyNy40NjUgQyAzMzIuOTU5IDEyNy4xMTggMzMzLjQzOSAxMjYuODQxIDMzMy45NTMgMTI2LjY0MyBMIDM1NS43MDcgMTE4LjI3OCBDIDM1Ni41OTMgMTE3LjkzNSAzNTcuMjk0IDExNy4yMzUgMzU3LjYzNiAxMTYuMzQ4IEwgMzY2LjAwOCA5NC41ODkgQyAzNjcuNDU2IDkwLjgxNiAzNzIuNDQ1IDkwLjAyNiAzNzQuOTg4IDkzLjE2NiBDIDM3NS4zMzUgOTMuNTk0IDM3NS42MTIgOTQuMDc0IDM3NS44MDkgOTQuNTg5IEwgMzg0LjE3NSAxMTYuMzQyIEMgMzg0LjUxNyAxMTcuMjI5IDM4NS4yMTkgMTE3LjkyOSAzODYuMTA1IDExOC4yNzIgTCA0MDcuNzMyIDEyNi41OTMgQyA0MDkuODQ1IDEyNy4zNzYgNDExLjI0MSAxMjkuNCA0MTEuMjI0IDEzMS42NTMgQyA0MTEuMTkxIDEzMy43ODggNDA5Ljg2IDEzNS42ODcgNDA3Ljg2NCAxMzYuNDQ1IEwgMzg2LjExMSAxNDQuODExIEMgMzg1LjIyNSAxNDUuMTUzIDM4NC41MjQgMTQ1Ljg1NCAzODQuMTgxIDE0Ni43NCBMIDM3NS44MDkgMTY4LjUgQyAzNzUuMDM2IDE3MC41MzIgMzczLjA4MyAxNzEuODcgMzcwLjkwOSAxNzEuODU5IFogTSAzODQuOTQ2IDExOC4zNDkgWiIgLz4KICAgICAgICA8cGF0aCBkPSJNIDQyMi42NjkgMjI4LjI1IEMgNDIxLjExMSAyMjguMjU4IDQxOS43MTIgMjI3LjI5OSA0MTkuMTU3IDIyNS44NDMgTCA0MTMuMTYyIDIxMC4yNTIgQyA0MTIuOTE2IDIwOS42MTcgNDEyLjQxNSAyMDkuMTE1IDQxMS43NzkgMjA4Ljg3IEwgMzk2LjE4NCAyMDIuODcgQyAzOTMuNDgxIDIwMS44MzIgMzkyLjkxNSAxOTguMjU3IDM5NS4xNjUgMTk2LjQzNCBDIDM5NS40NzIgMTk2LjE4NiAzOTUuODE2IDE5NS45ODcgMzk2LjE4NCAxOTUuODQ1IEwgNDExLjc3NSAxODkuODUgQyA0MTIuNDEgMTg5LjYwNCA0MTIuOTEyIDE4OS4xMDMgNDEzLjE1NyAxODguNDY3IEwgNDE5LjE1NyAxNzIuODczIEMgNDIwLjE5NSAxNzAuMTY5IDQyMy43NyAxNjkuNjAzIDQyNS41OTMgMTcxLjg1MyBDIDQyNS44NDEgMTcyLjE2IDQyNi4wNCAxNzIuNTA0IDQyNi4xODEgMTcyLjg3MyBMIDQzMi4xNzcgMTg4LjQ2MyBDIDQzMi40MjIgMTg5LjA5OCA0MzIuOTI1IDE4OS42IDQzMy41NiAxODkuODQ2IEwgNDQ5LjA1OSAxOTUuODA5IEMgNDUwLjU3NCAxOTYuMzcgNDUxLjU3NCAxOTcuODIxIDQ1MS41NjIgMTk5LjQzNiBDIDQ1MS41MzggMjAwLjk2NiA0NTAuNTg0IDIwMi4zMjcgNDQ5LjE1NCAyMDIuODcgTCA0MzMuNTY0IDIwOC44NjYgQyA0MzIuOTI5IDIwOS4xMTEgNDMyLjQyNyAyMDkuNjEzIDQzMi4xODEgMjEwLjI0OCBMIDQyNi4xODEgMjI1Ljg0MyBDIDQyNS42MjcgMjI3LjI5OSA0MjQuMjI4IDIyOC4yNTggNDIyLjY2OSAyMjguMjUgWiBNIDQzMi43MjkgMTg5LjkwMSBaIiAvPgo8L3N2Zz4=');
  mask-size: 100%;
  mask-position: center;
 }
<div class="clipped" style="width: 300px; height: 300px"></div>

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="myClip" clipPathUnits="userSpaceOnUse">
      <path d="M 164.305 329.606 L 164.305 350.016 C 164.305 368.136 181.085 374.836 199.205 374.836 L 221.265 374.836 C 224.165 401.206 228.255 398.846 228.255 410.216 C 228.255 410.216 228.255 415.586 232.135 415.586 L 233.475 415.586 C 237.355 415.586 237.355 410.216 237.355 410.216 C 237.355 398.786 241.485 401.206 244.385 374.836 L 265.105 374.836 C 283.225 374.836 303.365 368.136 303.365 350.016 L 303.365 330.126 C 260.215 334.896 205.075 334.716 164.315 329.606 L 164.305 329.606 Z" />
      <path d="M 164.305 265.316 L 164.305 294.856 C 205.065 300.076 260.205 300.256 303.355 295.376 L 303.355 265.456 C 279.385 266.756 258.085 267.446 234.955 267.446 C 211.825 267.446 185.885 266.706 164.305 265.316 Z" />
      <path d="M 303.355 230.126 L 303.355 196.256 C 303.355 184.256 293.355 173.736 283.695 167.966 L 298.065 141.276 C 302.585 133.786 299.285 123.956 291.795 119.436 C 284.305 114.916 274.045 111.626 269.525 119.116 L 245.875 151.866 L 217.465 151.866 L 194.245 119.116 C 189.725 111.626 179.895 112.056 172.405 116.576 C 164.915 121.096 162.485 132.356 167.005 139.846 L 182.375 166.266 C 171.755 171.756 164.295 183.536 164.295 196.256 L 164.295 229.606 C 205.055 234.826 260.195 235.006 303.345 230.126 L 303.355 230.126 Z" />
      <path d="M 149.915 347.076 L 143.555 353.486 L 141.985 355.376 C 134.375 363.726 123.485 368.506 112.085 368.506 C 101.975 368.506 92.325 364.786 84.905 358.026 C 76.965 350.796 72.325 340.846 71.815 330.026 C 71.315 319.196 75.015 308.866 82.255 300.926 L 115.085 261.416 L 149.925 219.496 L 149.925 196.246 C 149.925 186.916 153.115 177.656 158.505 169.886 L 83.895 257.766 L 60.705 285.076 C 49.235 297.656 45.445 314.006 46.235 331.116 C 47.035 348.226 55.445 363.956 68.025 375.426 C 79.785 386.146 95.595 392.046 111.585 392.046 C 126.605 392.046 141.345 386.756 152.735 377.326 L 157.675 372.336 C 152.725 366.216 149.925 358.646 149.925 350.006 L 149.925 347.076 L 149.915 347.076 Z" />
      <path d="M 404.755 285.086 L 381.785 258.036 L 306.865 169.896 C 312.255 177.666 315.335 186.936 315.335 196.256 L 315.335 219.506 L 350.435 261.626 L 383.175 300.936 C 390.405 308.876 394.125 319.206 393.625 330.036 C 393.125 340.856 388.475 350.806 380.545 358.036 C 373.125 364.796 363.475 368.516 353.365 368.516 C 341.965 368.516 331.055 363.726 323.455 355.386 L 321.805 353.496 L 315.335 347.086 L 315.335 350.016 C 315.335 358.656 312.645 366.226 307.695 372.346 L 312.715 377.336 C 324.105 386.766 338.855 392.056 353.875 392.056 C 369.865 392.056 385.675 386.156 397.435 375.436 C 410.015 363.966 418.425 348.236 419.225 331.126 C 420.025 314.016 416.215 297.666 404.755 285.086 Z" />
      <path d="M 370.909 171.859 C 368.735 171.87 366.782 170.532 366.008 168.5 L 357.643 146.746 C 357.3 145.86 356.6 145.159 355.713 144.817 L 333.953 136.445 C 330.181 134.997 329.391 130.008 332.531 127.465 C 332.959 127.118 333.439 126.841 333.953 126.643 L 355.707 118.278 C 356.593 117.935 357.294 117.235 357.636 116.348 L 366.008 94.589 C 367.456 90.816 372.445 90.026 374.988 93.166 C 375.335 93.594 375.612 94.074 375.809 94.589 L 384.175 116.342 C 384.517 117.229 385.219 117.929 386.105 118.272 L 407.732 126.593 C 409.845 127.376 411.241 129.4 411.224 131.653 C 411.191 133.788 409.86 135.687 407.864 136.445 L 386.111 144.811 C 385.225 145.153 384.524 145.854 384.181 146.74 L 375.809 168.5 C 375.036 170.532 373.083 171.87 370.909 171.859 Z M 384.946 118.349 Z" />
      <path d="M 422.669 228.25 C 421.111 228.258 419.712 227.299 419.157 225.843 L 413.162 210.252 C 412.916 209.617 412.415 209.115 411.779 208.87 L 396.184 202.87 C 393.481 201.832 392.915 198.257 395.165 196.434 C 395.472 196.186 395.816 195.987 396.184 195.845 L 411.775 189.85 C 412.41 189.604 412.912 189.103 413.157 188.467 L 419.157 172.873 C 420.195 170.169 423.77 169.603 425.593 171.853 C 425.841 172.16 426.04 172.504 426.181 172.873 L 432.177 188.463 C 432.422 189.098 432.925 189.6 433.56 189.846 L 449.059 195.809 C 450.574 196.37 451.574 197.821 451.562 199.436 C 451.538 200.966 450.584 202.327 449.154 202.87 L 433.564 208.866 C 432.929 209.111 432.427 209.613 432.181 210.248 L 426.181 225.843 C 425.627 227.299 424.228 228.258 422.669 228.25 Z M 432.729 189.901 Z" />
    </clipPath>
    <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#0077f2" />
      <stop offset="25%" stop-color="#db5157" />
      <stop offset="50%" stop-color="#ff8e26" />
      <stop offset="75%" stop-color="#a79353" />
      <stop offset="100%" stop-color="#279a94" />
    </linearGradient>
  </defs>
  <rect width="500" height="500" fill="url(#g1)" clip-path="url(#myClip)" />
</svg>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.