使用Safari在svg渲染模式下，rgba渐变的透明度值失效

[hhshii]

One-line summary [问题简述]

使用Safari，在透明度设置值

new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: 'rgba(172,90,255,0.2)' },
                            { offset: 1, color: 'rgba(172,90,255,0)' }
                        ]
           )

之后，无论是设置areaStyle还是直接设置color，在Safari上结果都好像是直接忽略的透明度的值，同时Chrome/FireFox 上都可以正常显示

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:4.1.0
• Browser version [浏览器类型和版本]:Safari 11/Safari 12，Chrome 69 , FireFox 61
• OS Version [操作系统类型和版本]:MacOs 10.13.6/MacOs 10.14 Beta

Expected behaviour [期望结果]

能够正常显示透明度

ECharts option [ECharts配置项]

option = {
  "title": {
    "text": ""
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": [],
    "show": false
  },
  "grid": {
    "left": 5,
    "right": 15,
    "bottom": "2%",
    "top": "4%",
    "containLabel": true,
    "show": true,
    "backgroundColor": "transparent"
  },
  "xAxis": {
    "type": "category",
    "boundaryGap": false,
    "data": [
      "0:00",
      "0:30",
      "1:00",
      "1:30",
      "2:00",
      "2:30",
      "3:00",
      "3:30",
      "4:00",
      "4:30",
      "5:00",
      "5:30",
      "6:00",
      "6:30",
      "7:00",
      "7:30",
      "8:00",
      "8:30",
      "9:00",
      "9:30",
      "10:00",
      "10:30",
      "11:00",
      "11:30",
      "12:00",
      "12:30",
      "13:00"
    ],
    "splitLine": {
      "show": false
    },
    "axisTick": {
      "show": false
    },
    "axisLine": {
      "show": false
    },
    "axisLabel": {
      "fontSize": 10
    }
  },
  "yAxis": {
    "type": "value",
    "min": 0,
    "axisTick": {
      "show": false
    },
    "axisLabel": {
      "fontSize": 10
    },
    "axisLine": {
      "show": false
    },
    "splitLine": {
      "show": true
    },
    "interval": 69211
  },
  "series": [
    {
      "name": "1",
      "type": "line",
      "smooth": true,
      "itemStyle": {
        "normal": {
          "opacity": 0
        }
      },
      "lineStyle": {
        "normal": {
          "width": 1.5,
          "color": "#AC5AFF"
        }
      },
      "z": 0,
      "areaStyle": {
        "normal": {
          "color": new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: 'rgba(172,90,255,0.2)' },
                            { offset: 1, color: 'rgba(172,90,255,0)' }
                        ]
           )
        }
      },
      "data": [
        31574,
        164657,
        276844,
        101562,
        112015,
        92247,
        76087,
        75194,
        58138,
        57983,
        70396,
        90285,
        94566,
        91314,
        114043,
        91601,
        73448,
        45801,
        76783,
        257652,
        264912,
        110699,
        144759,
        117858,
        83102,
        71152,
        62269
      ]
    }
  ],
  "animationEasing": "circularOut"
}

Other comments [其他信息]

附上JSFiddle：
https://jsfiddle.net/vepj821g/18/

[Ovilia]

This is a safari bug since color-opacity defined in W3C spec is:

The opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color

Maybe we can provide ad hoc for it.

See https://stackoverflow.com/questions/11303740/svg-linear-gradient-doesnt-work-in-safari/11310511 for more information.