SVGLoader not support svg with <linearGradient>

my svg like:

<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <defs>
  <radialGradient spreadMethod="pad" id="color1">
   <stop stop-color="#FF0000" offset="10%"/>
   <stop stop-color="#FFFFFF" stop-opacity="0" offset="1"/>
  </radialGradient>
 </defs>
 <g>
  <circle id="svg_1" r="40" cy="40" cx="40" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="url(#color1)"/>
 </g>
</svg>

When I loaded this svg file using SVG Loader, threejs didn’t display properly, just a circle with a white background color.

There is an open issue for missing linear gradient support at GitHub:

1 Like