Svg clip-path not working on iOS (chrome, safari and firefox)-CodePudding

I am using svg clip-path in react, it works fine in google chrome, firefox on Desktop and Android but not safari (iOS and Desktop) and google chrome (on iOS).

This is my code:

<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 has a conic-gradient

This is the working result

This the non working result (iOS and Safari)

CodePudding user response：

I finally found the solution:

I had to apply the clipPath to a div containing the svg element, the final code :

<div className={classNames("rounded-full", className)} style={{ clipPath: "url(#clipPath)" }}>
     <svg viewBox="0 0 224 224" fill="none" xmlns="http://www.w3.org/2000/svg" ref={svgRef}>
       <defs>
         <clipPath id="clipPath">
           <path d={path} />
         </clipPath>
       </defs>

       <path d={path} fill={colors.lightGray} className="mix-blend-darken" />
     </svg>
   </div>