SVG clipPath在WebKit内核浏览器下无法渲染问题求助

该问题是WebKit内核的已知兼容性缺陷导致：Chrome、Safari等WebKit内核浏览器对直接应用在<foreignObject>标签上的SVG内联clipPath支持异常，无法识别裁剪区域导致内容消失，Firefox对该场景做了兼容处理所以可以正常渲染。

以下是两种可跨内核运行的修复方案：

方案1：调整clip-path挂载位置 #

将原本声明在<foreignObject>上的clip-path属性移到内部的HTML元素上即可兼容WebKit内核，原有CSS无需修改，修改后代码如下：

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

方案2：使用SVG原生渐变（更推荐） #

完全弃用<foreignObject>嵌入HTML元素的方案，直接用SVG原生线性渐变填充自定义环形路径，性能和兼容性更强，无需额外CSS，完整代码如下：

<svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="rgba(6,94,115,0.796)" />
            <stop offset="100%" stop-color="rgba(207,241,255,1)" />
        </linearGradient>
    </defs>
    <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" fill="url(#ringGradient)"/>
</svg>

内容的提问来源于stack exchange，提问作者loranger