【发布时间】：2021-07-12 11:04:33
【问题描述】：
我需要通过我在 jsfiddle - https://jsfiddle.net/1ojphezv/1/ 中实现的 css clip-path(source url - image-1) 覆盖 highcharts plotband div，这对我来说很好。
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,0)',
from: 0,
to: 30.99,
zIndex: 3
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3
},
{
color: 'rgb(0,153,0)',
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,
title: {
text: ""
},
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,"y":25},
{ "x":1601922600000,"y":28},
{ "x":1602009000000,"y":30},
{ "x":1602095400000,"y":22},
{ "x":1602181800000,"y":24},
{ "x":1602268200000,"y":44},
{ "x":1602354600000,"y":25},
{ "x":1602441000000,"y":34},
{ "x":1602527400000,"y":10},
{ "x":1602613800000,"y":12},
{ "x":1602700200000,"y":25},
{ "x":1602786600000,"y":28},
{ "x":1602873000000,"y":30},
{ "x":1602959400000,"y":22},
{ "x":1603045800000,"y":24},
{ "x":1603132200000,"y":44},
{ "x":1603218600000,"y":25},
{ "x":1603305000000,"y":34},
{ "x":1603391400000,"y":10},
{ "x":1603477800000,"y":12},
{ "x":1603564200000,"y":25},
{ "x":1603650600000,"y":28},
{ "x":1603737000000,"y":30},
{ "x":1603823400000,"y":22},
{ "x":1603909800000,"y":24},
{ "x":1603996200000,"y":44},
{ "x":1604169000000,"y":25},
{ "x":1604255400000,"y":34},
{ "x":1604341800000,"y":10},
{ "x":1604428200000,"y":12},
{ "x":1604514600000,"y":25},
{ "x":1604601000000,"y":28},
{ "x":1604687400000,"y":30},
{ "x":1604773800000,"y":22},
{ "x":1604860200000,"y":24},
{ "x":1604946600000,"y":44},
{ "x":1605033000000,"y":25},
{ "x":1605119400000,"y":34},
{ "x":1605205800000,"y":10},
{ "x":1605292200000,"y":12},
{ "x":1605378600000,"y":25},
{ "x":1605465000000,"y":28},
{ "x":1605551400000,"y":30},
{ "x":1605637800000,"y":22},
{ "x":1605724200000,"y":24},
{ "x":1605810600000,"y":44}
],
"name": 'ABC',
"type": 'spline'
},
{
"color": "rgb(154,2,42)",
"data": [
{"x":1601490600000,"y":50},
{"x":1601577000000,"y":30},
{ "x":1601663400000,"y":40},
{ "x":1601749800000,"y":42},
{ "x":1601836200000,"y":86},
{ "x":1601922600000,"y":50},
{ "x":1602009000000,"y":60},
{ "x":1602095400000,"y":75},
{ "x":1602181800000,"y":80},
{ "x":1602268200000,"y":85},
{ "x":1602354600000,"y":50},
{ "x":1602441000000,"y":30},
{ "x":1602527400000,"y":40},
{ "x":1602613800000,"y":42},
{ "x":1602700200000,"y":86},
{ "x":1602786600000,"y":50},
{ "x":1602873000000,"y":60},
{ "x":1602959400000,"y":75},
{ "x":1603045800000,"y":80},
{ "x":1603132200000,"y":85},
{ "x":1603218600000,"y":50},
{ "x":1603305000000,"y":30},
{ "x":1603391400000,"y":40},
{ "x":1603477800000,"y":42},
{ "x":1603564200000,"y":86},
{ "x":1603650600000,"y":50},
{ "x":1603737000000,"y":60},
{ "x":1603823400000,"y":75},
{ "x":1603909800000,"y":80},
{ "x":1603996200000,"y":85},
{ "x":1604169000000,"y":50},
{ "x":1604255400000,"y":30},
{ "x":1604341800000,"y":40},
{ "x":1604428200000,"y":42},
{ "x":1604514600000,"y":86},
{ "x":1604601000000,"y":50},
{ "x":1604687400000,"y":60},
{ "x":1604773800000,"y":75},
{ "x":1604860200000,"y":80},
{ "x":1604946600000,"y":85},
{ "x":1605033000000,"y":50},
{ "x":1605119400000,"y":30},
{ "x":1605205800000,"y":40},
{ "x":1605292200000,"y":42},
{ "x":1605378600000,"y":86},
{ "x":1605465000000,"y":50},
{ "x":1605551400000,"y":60},
{ "x":1605637800000,"y":75},
{ "x":1605724200000,"y":80},
{ "x":1605810600000,"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, 100 0, 50 0, 50 250, -50 250" />
</clipPath>
</defs>
</svg>
</div>当我将相同的代码集成到我的项目/解决方案中时，clip-path css 源 url 会发生变化，它开始指向绝对路径 (image-2)
谁能告诉我，在集成到我的项目中时，为什么源 url 指向解决方案的绝对路径？
过去几天我在这里苦苦挣扎。任何解决方案将不胜感激！
【问题讨论】：
标签： javascript html css highcharts clip-path