When implementing svg clip-path in react, it seems to function correctly on Google Chrome and Firefox for both Desktop and Android. However, there are issues with the display on Safari (iOS and Desktop) as well as Google Chrome on iOS.
Here is the code snippet being used:
<svg
viewBox="0 0 224 224"
fill="none"
xmlns="http://www.w3.org/2000/svg"
ref={svgRef}
className={classNames("rounded-full", className)}
style={{ clipPath: "url(#clipPath)", WebkitClipPath: "url(#clipPath)" }}
>
<defs>
<clipPath id="clipPath">
<path d={path} />
</clipPath>
</defs>
<path d={path} fill={colors.lightGray} className="mix-blend-darken" />
</svg>The svg element includes a conic-gradient.
View the functioning result https://i.sstatic.net/snG1l.png
Alternatively, here is the non-working result on iOS and Safari https://i.sstatic.net/qi2ab.png