Question

任务

我正在尝试使用一个完整高度的图像，并使用SVG蒙版进行剪裁，这也是全高。

问题

虽然图像是全高，但SVG裁剪的大小始终相同，不会调整到图像的整个高度。

我读过关于使用的内容：clipPathUnits="objectBoundingBox" 在clipPath上，但这似乎进一步打破了它。

CSS：

img {
      position: absolute;
      clip-path: url(#path); 
      -webkit-clip-path: url(#path); 
      width: 100%;
      height: 100%;
}

HTML：

<div>
    <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 440">
        <defs>
            <clipPath  id="path">
                <path d="m54.3,1c64,1 89.3,85 89.8,85.6c1,0.4 7,37 19,53.7c11.8,16.6 30.7,28.5 35,33.8c4.3,6 9,8 4.8,17s-18.8,7 -24.8,20c-6,13.7 7.5,11 8.6,22c1,11 -31.2,14 -29.6,27c1.4,13 22.4,12 24,23c1.5,11.6 -9,10 -13,18c-3.8,8 15.6,20 5,38c-11,18.5 -57.7,7 -84,32.5c-26.4,25.3 -35.5,70 -34.4,70.4c1,0.4 -64,3 -61.8,-1c2.1,-4 -4.9,-440 2.1,-440s-4.6,-1 59.4,0l-0.1,0z"/>
            </clipPath>
        </defs>

    <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg">

    </svg>
</div>

jsFiddle显示问题 - https://jsfiddle.net/kjnovege/1/

有没有办法实现这个目标？

CSS SVG ClipPath - 适合高度的路径

任务

问题

0 个答案: