clipPath on webkit does not render-CodePudding

Enthused by this article, I tried to apply a gradient clip-path to my relatively simple shape (an O letter converted to curves).

It works perfectly under Firefox, but as soon as I try it under a webkit, I see absolutely nothing.

I've tried to fix it, I've split it in simple parts, trying both Amit Sheen code with mine, and the only thing that make it fail is using my path instead of his. If I don't use clipPath, the path is rendered as expected, but as soon as I clip it, it just vanishes. I can't figure out what the problem is.

Can you help me?

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

CodePudding user response：

You may need to transform your path so that it's left upper corner falls in the point (0,0). This is needed in chrome but won't work in firefox unless the foreign object has x="0" y="0". For this reason instead of giving a x and y attributes to the foreign object I translated it to the needed point.

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>