我正在尝试clip-path在 div 上使用css 属性。下面是我最初开始的一个工作示例
.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>您的第二个示例实际上确实剪辑了路径，但问题是 svg 路径比框甚至容器大得多。您需要将剪切路径转换（缩放）到与 html 元素相同的尺寸。在 svg 中，你可以看到viewBox="0 0 2048 1536"
我不知道剪切路径应该是什么样子，但是如果对您的 svg 文件进行以下更改，它可能会开始有意义： <clipPath id="clip" transform="scale(0.1 0.1)">
您可能想要使用 viewbox 的值和 css 的尺寸来获得用于 clipPath 转换的正确因子。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句