webkit 上的 clipPath 不呈现

Posted 2023-03-06

【中文标题】webkit 上的 clipPath 不呈现

【英文标题】：clipPath on webkit does not render

【发布时间】：2021-12-03 16:54:13

【问题描述】：

受到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"   clip-path="url(#clip)">
        <div class="gradient" xmlns="http://www.w3.org/1999/xhtml"></div>
    </foreignObject>

</svg>

【问题讨论】：

在 Firefox 和 Safari 上对我来说看起来一样。

你是对的。它在chrome和brave上失败了，所以我认为问题来自webkit，这是错误的

你应该在here寻找它，如果你已经找不到它，请报告它。

【参考方案1】：

您可能需要转换路径，使其左上角落在点 (0,0) 中。这在 chrome 中是必需的，但在 Firefox 中不起作用，除非异物具有 x="0" y="0"。出于这个原因，我没有将 x 和 y 属性赋予外来对象，而是将其翻译到需要的位置。

svgbackground:silver

<svg viewBox="0 0 1000 400">

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

【讨论】：

非常感谢。你知道这是否有理由与 chrome、firefox 和 safari 不同？

一定是bug。如果您愿意，可以进行研究。