CSS 剪辑路径定位问题
CSS Clip-path positioning issues
我使用 SVG 元素创建了一个相当简单的形状,然后使用 clip-path
将其放入我的 CSS 中。它应该使角落变圆,但出于某种原因,只有 1 个角落的效果完美。
这是形状:
<svg height="500" width="500">
<path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</svg>
这是我将它用作 clip-path
时发生的情况
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
它似乎在 FireFox 中完美运行,但在 Chrome 中显示除右下角外的边角没有正确切割。
default units for the clip-path
is userSpaceOnUse
这似乎是参考根元素计算路径的坐标。这就是 clip-path
似乎产生错误输出的原因。取消根元素上的 margin
和 padding
或绝对定位元素(如以下代码片段所示)应该可以解决问题。
body {
background: #555;
}
img {
position: absolute;
top: 0px;
left: 0px;
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="http://lorempixel.com/500/500/" />
然而,在现实生活中,必须被剪裁的实际元素可能出现在 body 中的任何位置,因此我认为使用 objectBoundingBox
是一种更好的方法以下代码段中的单位:
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M0.1,0 L0.9,0 Q1,0 1,0.1 L1,0.8 Q1,0.9 0.9,0.9 L0.4,0.9 L0.35,1 L0.3,0.9 L0.1,0.9 Q0,0.9 0,0.8 L0,0.1 Q0,0 0.1,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
如问题本身所述,由于我不知道的原因,此行为仅在 Chrome 中可见,而在 Firefox 中不可见。 Firefox 产生类似于预期的输出,即使 (a) 额外的填充 + 边距添加到 body 和 (b) 当图像本身被包裹在另一个也有填充 + 边距的容器中时。
Firefox 的输出与 Chrome 匹配的唯一情况是 padding
直接添加到 img
标签本身。我相信发生这种情况是因为 padding
是元素的一部分,因此会影响坐标。
我使用 SVG 元素创建了一个相当简单的形状,然后使用 clip-path
将其放入我的 CSS 中。它应该使角落变圆,但出于某种原因,只有 1 个角落的效果完美。
这是形状:
<svg height="500" width="500">
<path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</svg>
这是我将它用作 clip-path
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
它似乎在 FireFox 中完美运行,但在 Chrome 中显示除右下角外的边角没有正确切割。
default units for the clip-path
is userSpaceOnUse
这似乎是参考根元素计算路径的坐标。这就是 clip-path
似乎产生错误输出的原因。取消根元素上的 margin
和 padding
或绝对定位元素(如以下代码片段所示)应该可以解决问题。
body {
background: #555;
}
img {
position: absolute;
top: 0px;
left: 0px;
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
</clipPath>
</defs>
</svg>
<img src="http://lorempixel.com/500/500/" />
然而,在现实生活中,必须被剪裁的实际元素可能出现在 body 中的任何位置,因此我认为使用 objectBoundingBox
是一种更好的方法以下代码段中的单位:
body {
background: #555;
}
img {
clip-path: url(#svgPath);
-webkit-clip-path: url(#svgPath);
}
<svg height="0" width="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M0.1,0 L0.9,0 Q1,0 1,0.1 L1,0.8 Q1,0.9 0.9,0.9 L0.4,0.9 L0.35,1 L0.3,0.9 L0.1,0.9 Q0,0.9 0,0.8 L0,0.1 Q0,0 0.1,0z" />
</clipPath>
</defs>
</svg>
<img src="https://dummyimage.com/500" />
如问题本身所述,由于我不知道的原因,此行为仅在 Chrome 中可见,而在 Firefox 中不可见。 Firefox 产生类似于预期的输出,即使 (a) 额外的填充 + 边距添加到 body 和 (b) 当图像本身被包裹在另一个也有填充 + 边距的容器中时。
Firefox 的输出与 Chrome 匹配的唯一情况是 padding
直接添加到 img
标签本身。我相信发生这种情况是因为 padding
是元素的一部分,因此会影响坐标。