svg在safari中显示为红色，角度为2的动态渐变

Question

我正在创建一个动态条形图，它填充到一个点，顶部的线性渐变也是动态的。我一直在遇到safari的多个问题，例如只读取样式的属性，并且只读取svg属性，所以我一直试图让它工作一段时间。

图表在chrome和firefox上显示得很好，但是在safari中，它显示了没有任何渐变的常规红色填充。但是，如果我使用创建的html并将其投入w3schools之类的东西，我可以正确地看到图形渐变。我想在野生动物园做不到的事情吗？

这是我的一些代码：

//after view is checked, run this.
ngAfterViewChecked(){
    let id;
    if(this.bars != undefined && this.bars.length > 0){
      id = "chartWithDynamicWidth" + "-" + this.bars[0].id;
    }else{
      return;
    }
    //chartWithDynamicWidth
    let element = document.getElementById(id);
    if(element){
      element.style.width = this.bars[this.bars.length-1].x + this.bars[this.bars.length-1].width +12;
      if(this.type == 'manage' ){//because svg class, isn't like other classes. 
        element.className['baseVal']  = 'chart style-fix-chart-manage'
      }else{
        element.className['baseVal']  = 'chart style-fix-chart-not-manage'
      }
    }
    for(let i = 0; i< this.bars.length; i++){
      let bar = this.bars[i];
      let color = bar.color;
        this.fillInTheGraphGradient(bar, [color]);
    }
  }
  fillInTheGraphGradient(bar, colors){
    let color, id, element;
    for(let j = 0; j< colors.length; j++){
      color = colors[j];
      id = 'color-bar-'+color+'-' + bar.id;
      element = document.getElementById(id);
      if(element){
        element.style.fill = 'url(#MyGradient-bar-'+color+'-' + bar.id + ')';
      }else{
        //console.log('no element with id', id);
      }
      id = 'MyGradient-stop2-'+color+'-' + bar.id;
      element = document.getElementById(id);
      if(element){
        element.setAttribute("offset", (100 / bar.level) * (2 * bar.leeway) + '%');
        element.setAttribute("stop-color", color);
      }else{
        console.log('no element with id', id);
      }
    }
  }


//html.
<svg  *ngIf=" !inProggress || true"
                [id]="'chartWithDynamicWidth'+'-' + bars[0].id"
                aria-labelledby="title desc" 
                role="img"  
                xmlns="http://www.w3.org/2000/svg" 
                xmlns:xlink="http://www.w3.org/1999/xlink"  
            >
                <g *ngFor="let bar of bars; let i = index;">
                    <g class="background-bar " (mouseover)='ShowTooltip(i,bar.color)' (mouseleave)='HideTooltip()'>
                        <rect 
                            [attr.width]="bar.bgWidth" 
                            height="100" 
                            [attr.y]="bar.bgY" 
                            [attr.x]="bar.bgX" 
                            [id]="'back-bar-'+bar.color+'-' + bar.id"
                        >
                        </rect>
                    </g>
                    <g *ngIf="bar.color != 'Tri-color'">
                        <defs>
                            <linearGradient [id]="'MyGradient-bar-'+bar.color+'-' + bar.id" x1="0" x2="0" y1="0" y2="1">
                                <stop  offset="0%" stop-color="#fff"  />
                                <stop [id]="'MyGradient-stop2-'+bar.color+'-' + bar.id" />
                            </linearGradient>
                        </defs>
                        <g  [attr.class]="bar.paused ? 'bar bar-paused' : 'bar'" (mouseover)='ShowTooltip(i,bar.color)' (mouseleave)='HideTooltip()'>
                            <rect 
                                [attr.width]="bar.width" 
                                [attr.height]="bar.height" 
                                [attr.y]="bar.y" 
                                [attr.x]="bar.x" 
                                [id]="'color-bar-'+bar.color+'-' + bar.id"
                            ></rect>
                            <text [attr.x]="bar.textX" [attr.y]="bar.textY" dy=".35em" class="graph-text"
                                >{{bar.color}}</text>
                        </g>
                    </g>
                  </g>
          </svg>