css - webkit 上的 clipPath 不呈现

Question

被 this article 所吸引，我尝试将渐变剪辑路径应用到我相对简单的形状(一个 O 字母转换为曲线)。

它在 Firefox 下完美运行，但当我在 webkit 下尝试时，我什么也看不到。

我已经尝试修复它，我将它分成简单的部分，用我的 Amit Sheen 代码尝试，唯一失败的是使用我的路径而不是他的路径。如果我不使用 clipPath，路径会按预期呈现，但一旦我剪辑它，它就会消失。我不知道是什么问题。

你能帮帮我吗？

.gradient {
    width: 157px;
    height: 157px;
    background: linear-gradient(90deg, rgba(6,94,115,0.7959383582534576) 0%, rgba(207,241,255,1) 100%); 
    border-radius: 50%;
}

<svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">

    <clipPath id="clip">
        <path d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
    </clipPath>
    
    <foreignObject x="470" y="150" width="157" height="157" clip-path="url(#clip)">
        <div class="gradient" xmlns="http://www.w3.org/1999/xhtml"></div>
    </foreignObject>

</svg>

Answer 1

您可能需要变换路径，使其左上角落在点 (0,0) 中。这在 chrome 中是必需的，但在 firefox 中不起作用，除非外部对象具有 x="0"y="0"。出于这个原因，我没有为外部对象提供 x 和 y 属性，而是将其转换为所需的点。

svg{background:silver}

<svg viewBox="0 0 1000 400">

  <foreignObject width="157" height="157" transform="translate(471,151)" clip-path="url(#clip)">
    <div style="height:100%;background:gold"> </div>
  </foreignObject>

  <clipPath id="clip">
    <path id="p" transform="translate(-471,-151)" d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
  </clipPath>


</svg>