剪切路径的宽度不是100％的宽度

Question

您好，我使用的是光滑滑块，我想剪切容器的路径，但是剪切路径无法正常工作。

这是我的SVG路径

<svg width="0" height="0">
    <defs>
        <clipPath id="mask1">
            <path id="curve" d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z">
            </path>
        </clipPath>
    </defs>
</svg>

滑块起作用，但是剪切路径不适合100％窗口。

谢谢..对不起，我的英语..

Answer 1

您应该clipPath使用边界框单位将其转换为一个：

<clipPath clipPathUnits="objectBoundingBox" ... >

使用边界框单位时，所有剪切路径坐标都应在0..1范围内定义。

http://www.w3.org/TR/SVG/masking.html# EstablishmentingANewClippingPath

如果执行此操作，则剪切路径的大小将与应用该剪切路径的元素的大小相同。

<clipPath clipPathUnits="objectBoundingBox" ... >

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

在上面的示例中，我所做的是使用a transform将剪切路径缩放为1x1大小。比使用新坐标重新创建形状容易。