SVG with radialGradient not work in browsers

Question

Problem:

The following svg code not work in browsers:

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

If replace stroke atribute in path fragment of svg with simple color (for example #f00) - it works, but with radial gradient - not works.

Question:

Is there a way to make this svg valid for browsers?

OR

Is there a way to make this element with HTML & CSS?

All information, that I've found not solves the problems, because:

Background of circle must be transparent
Gradient has grades around the circle (not from top to bottom)

P. S. Expected view of svg:

are you sure it's a radial-gradient? it's more a conic gradient for me — Temani Afif, Nov 29 '19 at 08:39
Thanks. The only way, that i've found based on conic gradient polyfill for svg by zapplebee https://codepen.io/zapplebee/pen/ByvPMN But i'm afraid about performance on the page, because that svg has more then 720 children. — Alex Shul, Nov 29 '19 at 13:08
Check this answer. It may help you: https://stackoverflow.com/a/60249151/3760232 — Nikita Seleckis, Mar 15 '21 at 15:13

Temani Afif · Accepted Answer · 2022-07-26T00:40:13.767

You can do this using mask and conic-gradient

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

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

<div class="box">

</div>

SVG with radialGradient not work in browsers

1 Answers1

Linked

Related