剪辑路径宽度不是 100% 宽度

Posted 2023-03-06

【中文标题】剪辑路径宽度不是 100% 宽度

【英文标题】：clip-path width doesn't 100% width

【发布时间】：2017-02-27 05:08:48

【问题描述】：

你好，我正在使用光滑的滑块，我想对容器进行剪辑路径，但剪辑路径不能正常工作..

这是我的 svg 路径

<svg  >
    <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% 窗口..

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

【参考方案1】：

您应该使用边界框单元将您的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  >
    <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 大小。这比使用新坐标重新创建形状要容易。

【讨论】：

但是我能问一下为什么下面还有一个面具吗？喜欢 mask2？

我正在测试一些东西，但忘了删除它。我现在已经修复了这个例子。

你在路径上调用getBBox()。这将返回路径的宽度和高度。然后，您可以通过将它们除以 1（即 1 / 宽度等）来计算比例。如果您的路径不在 (0,0) 处，那么您可能还必须在转换中包含 translate()。

可以使用JS。我使用的值是通过在测试页的路径上调用getBBox() 获得的。然后我手动计算了比例因子。 :)

很好的答案。本文更详细地介绍了转换：meyerweb.com/eric/thoughts/2017/02/24/…