起亞奧拉！我正試圖顯示一些用svg掩蓋的漂亮的英雄圖像，以創建漂亮而有趣的形狀。圖像在一個12列的網格元素中，標題和一些副本在前7列，圖像在后6列。我用的是NextJS和Tailwind搭配Sanity.io，供參考。

我的問題是，當SVG遮罩超出圖像所在的元素時，它顯然會裁剪出一條硬的直線邊緣。我可能用了錯誤的方法，但是我希望圖像的大小受到SVG和它們所在的元素的約束，這樣SVG的形狀就不會被父元素剪切。

下面是一些示例代碼:

<div className='grid grid-cols-12 p-4 bg-emerald-50'>
                <div className='col-span-7'> 
                    <h1 className='font-bold text-8xl text-cyan-500'>{about.title}</h1>
                    <div className='py-4 prose'>
                        <PortableText value={about.desc} />
                    </div>
                </div>
                <div className='relative col-span-5 m-1 clip-image'>
                    <Image src={urlFor(about.hero_image).url()} height={500} width={500} />
                </div>
            </div>

剪輯圖像是:

.clip-image {
    mask-image: url('../public/hero.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
  }

就像我說的，我認為我可能以錯誤的方式處理這個問題——我認為我必須將圖像的大小限制在它所在的元素的大小之內(或者只是選擇一個不同的圖像/SVG，這樣設置mask-size: 100%就不會剪切掉人臉)——但是任何其他的建議都將是非常感謝的！