我有一个非常基本的 SVG 剪辑路径:
<svg width="0" height="0">
<defs>
<clipPath id="line">
<path d="..." />
</clipPath>
</defs>
</svg>
我想使用CSS:
div {
clip-path: url(#line);
&:before {
...
}
}
它在 Google Chrome 中工作正常,但在 Safari 中根本不显示。
还尝试添加 -webkit-
前缀。
这是现场演示:https://jsfiddle.net/1dtpLg8y/
如果你去掉 :before
元素,它实际上可以工作: https://jsfiddle.net/fp5mouLn/
这是一个仅可运行的 SVG 版本:https://jsfiddle.net/3gt67cLh/1/但很想用 CSS 来做到这一点。
在 Safari 中不显示任何内容。
最佳答案
将 overflow:hidden
添加到行 div 似乎可以解决此问题。
(在 iOs safari 上测试)
.line {
-webkit-clip-path: url(#line);
clip-path: url(#line);
background-color: #ccc;
width: 196px;
height: 6px;
position: relative;
overflow: hidden;
}
.line:before {
content: "";
width: 80px;
height: 80px;
background: radial-gradient(red, transparent 35%);
position: absolute;
left: -30px;
top: -36px;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
}
<div class="line"></div>
<svg width="0" height="0">
<defs>
<clipPath id="line">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 5C0 4.65482 0.279822 4.375 0.625 4.375H5C8 4 9.11049 0.375 10 0.375C11 0.375 12 4 15 4.375H195.375C195.72 4.375 196 4.65482 196 5V5C196 5.34518 195.72 5.625 195.375 5.625H15C12 5.5 10 1.8 10 1.8C10 1.8 8 5.5 5 5.625H0.625C0.279822 5.625 0 5.34518 0 5V5Z"
fill="black"
/>
</clipPath>
</defs>
</svg>
关于CSS 剪辑路径在带有子元素/伪元素的 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71618263/