CSS clip-path 属性与 SVG 路径有问题

Question

我正在尝试在div上使用clip-pathcss属性。以下是我最初开始的一个工作示例

.contianer {
height: 300px;
width: 300px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 150px;
width: 150px;
background: white;
clip-path: url(#clip);
}

<div class="contianer">
<div class="box"></div>
</div>
<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clip">
<path d="M150 0 L75 200 L225 200 Z" />
</clipPath>
</defs>    
</svg>

我们现在以这个例子来根据需要自定义路径，并尝试使用Adobe Illustrator制作路径，结果如下

.contianer {
height: 300px;
width: 300px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 150px;
width: 150px;
background: white;
clip-path: url(#clip);
}

<div class="contianer">
<div class="box">
</div>
</div>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 1536">
<defs>
<style xmlns="http://www.w3.org/2000/svg">
.cls-1 {
fill: #e6e6e6;
}
</style>
<clipPath id="clip">
<path class="cls-2"  d="M1866.25984,246.41732V257.189l-.37795,18.74409s1.52362,14.06693,1.559,14.17323,2.941,11.76378,2.941,11.76378l4.88976,6.66142,4.21654,2.374,7.61811,1.66536,30.685,1.73622h6.30709l29.55118-.5315,1.03052,18.03543v826.22835l-2.19982,27.07087-61.08661.70866-17.43307,2.69291-10.60443,8.27169-3.71053,8.45272-.31669,50.32929-3.93528.69966-443.19685-.28879-1.6919-44.69979-2.7018-16.37188-6.36191-6.8181-19.29163-2.126-43.79528.56693-20.26772-.4252-1.98425-22.8189-.16708-831.685,4.986-34.72441,10.77165-22.96063,18-16.58268,25.38581-8.60007,25.52966-3.0522Z"/>
</clipPath>
</defs>    
</svg>

如您所见，问题是，第二个示例不会剪切路径。我假设d属性格式与该问题有关。每当路径取自网络源时，路径值都是这样的M150 0 L75...而从 illustrator 开始，它变得与小数和所有内容一样M1866.7,245.9s-1.1....。我不确定相对路径和绝对路径，以及这是否是原因。

我希望正确呈现第二个示例。

这是实际的剪切路径

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 2048 1536"><defs><style>.cls-1{fill:#e6e6e6;}.cls-2{fill:#f2f2f2;stroke:red;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><path class="cls-2" d="M1866.25984,246.41732V257.189l-.37795,18.74409s1.52362,14.06693,1.559,14.17323,2.941,11.76378,2.941,11.76378l4.88976,6.66142,4.21654,2.374,7.61811,1.66536,30.685,1.73622h6.30709l29.55118-.5315,1.03052,18.03543v826.22835l-2.19982,27.07087-61.08661.70866-17.43307,2.69291-10.60443,8.27169-3.71053,8.45272-.31669,50.32929-3.93528.69966-443.19685-.28879-1.6919-44.69979-2.7018-16.37188-6.36191-6.8181-19.29163-2.126-43.79528.56693-20.26772-.4252-1.98425-22.8189-.16708-831.685,4.986-34.72441,10.77165-22.96063,18-16.58268,25.38581-8.60007,25.52966-3.0522Z"/></svg>

Answer 1

您的第二个示例实际上确实裁剪了路径，但问题是 svg 路径比盒子甚至容器大得多。您需要将剪切路径转换(缩放(为与 html 元素相同的尺寸。在 svg 中，您可以看到该viewBox="0 0 2048 1536"

我不知道剪辑路径应该是什么样子，但如果对您的 svg 文件进行以下更改，它可能会开始有意义：<clipPath id="clip" transform="scale(0.1 0.1)">

您可能希望使用视框的值和 css 的尺寸来获取 clipPath 转换的正确因子。