CSS 剪辑路径在带有子元素/伪元素的 Safari 中不起作用

Question

我有一个非常基本的 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 中不显示任何内容。

Answer 1

将 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>

Answer 2

如果herrstrietzel的解决方案不起作用，请尝试“filter：hue-rotate(0deg);”

我遇到了类似的问题，添加“overflow：hidden”不起作用，但添加“filter：hue-rotate（0deg）”却起作用。