带有 radialGradient 的 SVG 在浏览器中不起作用

Question

问题：

以下 svg 代码在浏览器中不起作用：

<svg width="207" height="209" viewBox="0 0 207 209" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M96.2318 8.29356C149.379 4.30837 195.684 44.2918 199.657 97.599C203.631 150.906 163.767 197.351 110.62 201.336C57.473 205.321 11.1677 165.338 7.19452 112.031C3.2213 58.7234 43.0847 12.2787 96.2318 8.29356Z" stroke="url(#paint0_angular)" stroke-width="2"/>
    <defs>
        <radialGradient id="paint0_angular" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(103.426 104.815) rotate(-94.2626) scale(96.7891 96.5016)">
            <stop stop-color="#FF7870"/>
            <stop offset="1" stop-color="#FF7870" stop-opacity="0"/>
        </radialGradient>
    </defs> 
</svg>

如果用简单的颜色（例如 #f00）替换 path svg 片段中的 stroke 属性 - 它有效，但使用径向渐变 - 无效。

问题：

有没有办法让这个 svg 对浏览器有效？

或

有没有办法用 HTML & CSS 制作这个元素？

我发现的所有信息都不能解决问题，因为：

圆形背景必须透明
渐变有绕圈的等级（不是从上到下）

P。 S. svg 的预期视图：

Answer 1

很快你就可以只使用 CSS 和 mask 和 conic-gradient 来做到这一点，但对两者的支持仍然很低。

以下示例仅适用于 chrome:

.box {
  width:200px;
  height:200px;
  margin:20px auto;
  border-radius:50%;
  background:conic-gradient(transparent,red);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff calc(100% - 9px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff calc(100% - 9px));
}

body  {
  background:url(https://picsum.photos/id/100/1000/1000) center/cover;
}

<div class="box">

</div>

带有 radialGradient 的 SVG 在浏览器中不起作用

SVG with radialGradient not work in browsers

css

svg

border

radial-gradients