Webkit上的clipPath无法渲染。

Question

Webkit上的clipPath无法渲染。

4

受到这篇文章的启发，我尝试将渐变clip-path应用于相对简单的形状（一个转换为曲线的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>

- loranger

在Firefox和Safari上看起来对我来说是一样的。 - Robert Longson

你说得对。它在Chrome和Brave上失败了，所以我认为问题来自于WebKit，但这是错误的。 - loranger

你应该在这里查找它（https://bugs.chromium.org/p/chromium/issues/list），如果你在那里找不到它，就要报告它。 - Robert Longson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enxaneta · Accepted Answer

您可能需要转换路径，以使其左上角落在点（0,0）处。这在Chrome中是必需的，但在Firefox中不起作用，除非 foreign object 具有 x="0" y="0"。因此，我将 foreign object 的 x 和 y 属性转换为所需的点，而不是给它们一个 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>