我用一个SVG元素创建了一个相当简单的形状,然后用clip-path
把它放到CSS中,它应该能让我的角变圆,但由于某种原因,只有一个角能达到完美的效果。
这是形状:
<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
时所发生的情况
x一个一个一个一个x一个一个二个x
它似乎在FireFox中工作得很完美,但显示除了右下角之外,Chrome中的边角没有被正确切割。
2条答案
按热度按时间8cdiaqws1#
clip-path
的默认单位是userSpaceOnUse
,这似乎是根据根元素计算路径的坐标,这就是clip-path
似乎产生错误输出的原因,在根元素上使margin
和padding
无效或绝对定位元素(如下面的代码片段)应该可以解决这个问题。然而,在真实的生活中,需要裁剪的实际元素可能出现在主体中的任何位置,因此我认为使用
objectBoundingBox
作为单元是更好的方法,如下面的代码片段所示:一个二个一个一个
正如问题本身所提到的,这种行为只在Chrome中可见,而在Firefox中不可见,原因我不知道。Firefox生成的输出与预期的输出相似,即使(a)向主体添加了额外的填充+边距,(b)图像本身被 Package 在另一个容器中,该容器也具有填充+边距。
Firefox的输出与Chrome匹配的唯一情况是
padding
直接添加到img
标签本身,我认为这是因为padding
是元素的一部分,因此会影响坐标。pcww981p2#
要将SVG剪辑路径仅用于CSS,只需执行以下操作:
这样就不需要在模板或HTML中使用
<svg>
元素。