css 剪辑路径源 url 在解决方案中使用时发生更改

如何解决css 剪辑路径源 url 在解决方案中使用时发生更改

我需要通过我在 jsfiddle 中实现的 css clip-path(source url - image-1) 覆盖 highcharts plotband div - https://jsfiddle.net/1ojphezv/1/ 这对我来说很好用。

Highcharts.chart('container',{
        chart: {
            height: 250,plotBorderColor: '#BFBFBF',plotBorderWidth: 1,spacingLeft: 0,spacingRight: 1,spacingBottom: 0,marginBottom: 87
        },title: {
            text: null
        },credits: {
            enabled: false
        },legend: {
            align: 'left',itemStyle: {
                color: "#000",fontSize: "11px !important",fontWeight: "bold",textOverflow: null
            },symbolWidth: 20,x: 17,itemMarginBottom: 6
        },xAxis: {
                minPadding: 0.06,type: 'datetime',dateTimeLabelFormats: {
                week: '%b-%d-%Y',month: '%b-%d-%Y',year: '%Y'
            },labels: {
                style: {
                    fontSize: "10px !important",color: "#000"
                }
            },gridLineColor: "transparent",gridLineWidth: 0,lineWidth: 0,minorGridLineWidth: 0,lineColor: "transparent",tickLength: 0,style: {
                fontSize: "10px !important",color: "#000"
            }
        },yAxis: [
            {
                min: 0,max: 100,tickInterval: 20,plotBands: [
                    {
                        color: 'rgb(204,0)',from: 0,to: 30.99,zIndex: 3
                    },{
                        color: 'rgb(226,113,113)',from: 31,to: 44.99,{
                        color: 'rgb(247,209,34)',from: 45,to: 54.99,{
                        color: 'rgb(136,207,136)',from: 55,to: 68.99,{
                        color: 'rgb(68,180,68)',from: 69,to: 87.99,{
                        color: 'rgb(0,153,from: 88,to: 100,zIndex: 3
                    }
                ],gridLineWidth: 0.5,title: {
                    text: ""
                },labels: {
                    style: {
                        fontWeight: 'bold',color: 'black'
                    },x: -7,y: 5,formatter: function () {
                        return this.value;
                    }
                }
            },{
                linkedTo: 0,labels: {
                    enabled: false
                }
            }
        ],plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,formatter() {
                        return "";
                    }
                }
            },series: {
                    cursor: 'pointer',states: {
                    hover: {
                        enabled: true
                    },inactive: {
                        opacity: 1
                    }
                },enableMouseTracking: true,borderWidth: 1,borderColor: "#FFFFFF",threshold: 0,// let zero values have some height
                marker: {
                    enabled: false,radius: 2
                },minPointLength: 10,events: {
                    legendItemClick: function () {
                        return true;
                    }
                }
            }
        },tooltip: {
            useHTML: false,shared: false,followPointer: false,formatter: function () {
                return this.point.y;
            }
        },series: [
        {
                    "color": "rgb(0,187,221)","data": [
                    {"x":1601490600000,"y":25},{"x":1601577000000,"y":34},{ "x":1601663400000,"y":10},{ "x":1601749800000,"y":12},{ "x":1601836200000,{ "x":1601922600000,"y":28},{ "x":1602009000000,"y":30},{ "x":1602095400000,"y":22},{ "x":1602181800000,"y":24},{ "x":1602268200000,"y":44},{ "x":1602354600000,{ "x":1602441000000,{ "x":1602527400000,{ "x":1602613800000,{ "x":1602700200000,{ "x":1602786600000,{ "x":1602873000000,{ "x":1602959400000,{ "x":1603045800000,{ "x":1603132200000,{ "x":1603218600000,{ "x":1603305000000,{ "x":1603391400000,{ "x":1603477800000,{ "x":1603564200000,{ "x":1603650600000,{ "x":1603737000000,{ "x":1603823400000,{ "x":1603909800000,{ "x":1603996200000,{ "x":1604169000000,{ "x":1604255400000,{ "x":1604341800000,{ "x":1604428200000,{ "x":1604514600000,{ "x":1604601000000,{ "x":1604687400000,{ "x":1604773800000,{ "x":1604860200000,{ "x":1604946600000,{ "x":1605033000000,{ "x":1605119400000,{ "x":1605205800000,{ "x":1605292200000,{ "x":1605378600000,{ "x":1605465000000,{ "x":1605551400000,{ "x":1605637800000,{ "x":1605724200000,{ "x":1605810600000,"y":44}
                 ],"name": 'ABC',"type": 'spline'
                },{
                    "color": "rgb(154,2,42)","y":50},"y":40},"y":42},"y":86},"y":60},"y":75},"y":80},"y":85},"y":85}
                    ],"name": 'XYZ',"type": 'spline'
                }
        ]
    });

.highcharts-plot-bands-3 {
  clip-path: url(#clip-triangle);
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div>
  <div id="container" style="height: 400px; width: 95%"></div>
  <svg>
        <defs>
            <clipPath id="clip-triangle">
                <polygon points="0 0,100 0,50 0,50 250,-50 250" />
            </clipPath>
        </defs>
    </svg>
</div>

当我集成到我的项目/解决方案中时的相同代码，然后剪辑路径 css 源 url 发生变化，它开始指向绝对路径 (image-2)

谁能告诉我，在集成到我的项目中时，为什么源 url 指向解决方案的绝对路径？

最近几天我在这里挣扎。任何解决方案将不胜感激！

解决方法

很难说，也许构建您的项目会错误地更改文件的路径。

作为一种解决方法，您可以在第二个 yAxis 上定义这些 plotBands，并为此轴设置不同的宽度。

{
  linkedTo: 0,title: {
    text: ""
  },width: 25,labels: {
    enabled: false
  },plotBands: [{
      color: 'rgb(204,0)',from: 0,to: 30.99,zIndex: 3
    },{
      color: 'rgb(226,113,113)',from: 31,to: 44.99,{
      color: 'rgb(247,209,34)',from: 45,to: 54.99,{
      color: 'rgb(136,207,136)',from: 55,to: 68.99,{
      color: 'rgb(68,180,68)',from: 69,to: 87.99,{
      color: 'rgb(0,153,from: 88,to: 100,zIndex: 3
    }
  ],}

演示：https://jsfiddle.net/BlackLabel/1yjwr4ck/