剪辑路径宽度不是 100% 宽度
clip-path width doesn't 100% width
您好,我正在使用 slick slider,我想对容器进行剪辑路径,但剪辑路径效果不佳..
这是我的 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% window..
谢谢..对不起我的英语..
您应该使用边界框单位将 clipPath
转换为:
<clipPath clipPathUnits="objectBoundingBox" ... >
当您使用边界框单位时,所有裁剪路径坐标都应定义在 0..1 范围内。
http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath
如果您这样做,剪切路径将被赋予与您应用它的元素相同的大小。
img {
width: 100%;
clip-path: url(#mask1);
-webkit-clip-path: url(#mask1);
}
<svg width="0" height="0">
<defs>
<clipPath id="mask1" clipPathUnits="objectBoundingBox">
<path id="curve"
transform="scale(0.00135, 0.00254)"
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>
<img src="//placekitten.com/400/150"/>
我在上面的示例中所做的是使用 transform
将剪辑路径缩放到 1x1 大小。这比使用新坐标重新创建形状更容易。
您好,我正在使用 slick slider,我想对容器进行剪辑路径,但剪辑路径效果不佳..
这是我的 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% window..
谢谢..对不起我的英语..
您应该使用边界框单位将 clipPath
转换为:
<clipPath clipPathUnits="objectBoundingBox" ... >
当您使用边界框单位时,所有裁剪路径坐标都应定义在 0..1 范围内。
http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath
如果您这样做,剪切路径将被赋予与您应用它的元素相同的大小。
img {
width: 100%;
clip-path: url(#mask1);
-webkit-clip-path: url(#mask1);
}
<svg width="0" height="0">
<defs>
<clipPath id="mask1" clipPathUnits="objectBoundingBox">
<path id="curve"
transform="scale(0.00135, 0.00254)"
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>
<img src="//placekitten.com/400/150"/>
我在上面的示例中所做的是使用 transform
将剪辑路径缩放到 1x1 大小。这比使用新坐标重新创建形状更容易。