Question

我正在尝试使用SVG剪切路径定位图像。问题是无论我尝试执行什么操作，或者我似乎都无法在剪切路径内重新定位图像。我的想法是可以使用objec-fit和或object-position: center;来完成。

<img src="https://via.placeholder.com/1200" alt="" class="shape-left" height="">

<svg width="0" height="0" viewBox="0 0 1049 746" fill="none">
<clipPath id="shape-left">
<path d="M0.000244141 635.117C0.000244141 431.817 0.000244141 228.417 0.000244141 25.1169C38.3002 6.71692 85.9002 -4.08307 127.9 2.71693C175.3 10.4169 218 29.8169 258.2 55.2169C274.4 65.5169 289.4 77.5169 305.2 88.3169C337.8 110.617 374.8 118.717 413.6 119.817C448.4 120.817 482.4 115.817 515.4 104.617C545.8 94.4169 576.6 86.0169 608.8 83.6169C645.4 80.8169 681 84.4169 715.3 98.0169C764.9 117.717 801 152.717 828 197.917C837.6 214.117 845.7 231.117 855.8 247.017C873.4 274.717 896.9 294.717 928.5 305.017C944.3 310.217 959.9 316.117 975.1 323.017C993.4 331.417 1010.9 341.017 1023.4 357.417C1042.1 382.117 1049.6 410.217 1048.2 440.817C1047 466.817 1039.8 491.017 1026.3 513.317C1003.8 550.517 970.7 574.217 929.3 585.617C880.5 599.017 830.6 600.217 780.5 595.417C751.3 592.617 722.4 587.117 693.1 585.317C673.5 584.117 654.2 585.717 635.1 590.717C601.9 599.417 573.6 617.517 546.6 638.017C520.3 658.117 492.7 676.017 463.3 691.217C410 718.717 353.7 736.317 294 742.617C273.8 744.717 253.5 746.817 233.2 745.617C202.7 743.717 172.6 739.317 142.7 733.317C93.9002 723.417 52.8002 700.917 20.7002 662.517C13.4002 653.817 7.10024 644.217 0.000244141 635.117Z" fill="#6BC8C1"/>
</clipPath>
</svg>

<style>
.shape-left {
  clip-path: url(#shape-left);
  -webkit-clip-path: url(#shape-left);
}
</style>

这里有一支钢笔来演示它：https://codepen.io/monsmado/pen/ZEWdoWM

SVG剪切路径中的图像位置

0 个答案: