[Bug] In SVG rendering mode, ECharts does not support gradient colors for axis line styling.

[BrazilAmando]

Version

5.5.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=line-simple&lang=js&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdPqViNceADIRoNVPfQAbN1RMU3h78XvTA3pwEnl72FNQEtL7ujBy8ITEYBAAMdjGk5Nm5eZgATAQAjEV55GU56aHhnAGghKL1MUiwwABm3XhUYIVhERwJHBq0AL5VxUg9fQPZAHQArDzDkbTjmtPtXnO9_YNZq-uNo7QARt6M9ADWU9Z7u8UA7hACYNoVWfWTIf90C9YOQcPgiNF0HEaLIAG6MbxKWgkYH9IxUQiwNr2SGkIRgERY8orHKwEoAZlJJRKABYeGTygAOenlclrWDlGkAdnpJQAbFlbPVoXQksoASQnpMANxAA

Steps to Reproduce

xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{
lineStyle:{
color:{
type:'linear',
x:0,
y:0,
x2:1,
y2:0,
colorStops:[
{ offset:0,color:'red'},
{offset:0.5,color:'red'},
{offset:0.5,color:'black'}]
},
width:10
}
}
},

Current Behavior

When configured to use SVG rendering mode, ECharts does not support gradient colors for axis line styling. This limitation is not present in Canvas rendering mode.

Expected Behavior

gradient colors work well in SVG rendering mode.

Environment

- OS:windows11
- Browser:chrome
- Framework:

Any additional comments?

No response

[plainheart]

This may be similar to ecomfe/zrender#792. It's dut to the objectBoundingBox pattern unit. See also https://stackoverflow.com/questions/21638169/svg-line-with-gradient-stroke-wont-display-if-vertical-or-horizontal.

[plainheart]

As a workaround, you may refer to this demo.