在解决方案中使用时，css剪切路径源URL发生更改 [英] css clip-path source url gets change while using in solution
本文介绍了在解决方案中使用时，css剪切路径源URL发生更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要通过在jsfiddle中实现的css剪切路径(源URL-image-1)覆盖highcharts plotband div-
Highcharts.chart('container'，{图表: {高度:250，plotBorderColor:'#BFBFBF'，plotBorderWidth:1，intervalLeft:0，intervalRight:1intervalBottom:0，下边距:87}，标题: {文字:null}，学分:{启用:false}，传奇: {对齐:左"，itemStyle:{颜色:#000"，fontSize:"11px！important"，fontWeight:粗体"，textOverflow:空}，symbolWidth:20，x:17itemMargin底部:6}，xAxis:{minPadding:0.06，类型:"datetime"，dateTimeLabelFormats:{周:％b-％d-％Y"，月:％b-％d-％Y"，年:％Y"}，标签: {风格: {fontSize:"10px！important"，颜色:#000"}}，gridLineColor:透明"，gridLineWidth:0，lineWidth:0minorGridLineWidth:0，lineColor:透明"，tickLength:0，风格: {fontSize:"10px！important"，颜色:#000"}}，yAxis:[{最小值:0，最大值:100，tickInterval:20，plotBands:[{颜色:'rgb(204,0,0)'，从:0，至:30.99，zIndex:3}，{颜色:'rgb(226,113,113)'，来自:31，至:44.99，zIndex:3}，{颜色:'rgb(247,209,34)'，来自:45，至:54.99，zIndex:3}，{颜色:'rgb(136,207,136)'，来自:55，至:68.99，zIndex:3}，{颜色:'rgb(68,180,68)'，来自:69，至:87.99，zIndex:3}，{颜色:'rgb(0,153,0)'，来自:88，至:100，zIndex:3}]，gridLineWidth:0.5，标题: {文本: ""}，标签: {风格: {fontWeight:'bold'，颜色:黑色'}，x:-7，y:5格式化程序:function(){返回this.value;}}}，{LinkedTo:0，标题: {文本: ""}，标签: {启用:false}}]，plotOptions:{柱子: {dataLabels:{已启用:true，formatter(){返回 "";}}}，系列: {光标:指针"，状态: {悬停:{已启用:true}，无效:{不透明度:1}}，enableMouseTracking:true，borderWidth:1borderColor:#FFFFFF"，threshold:0，//让零值有一些高度标记:{已启用:false，半径:2}，minPointLength:10，事件:{legendItemClick:函数(){返回true；}}}}，工具提示:{useHTML:false，共用:假，followPointer:否，格式化程序:function(){返回this.point.y;}}，系列: [{"color":"rgb(0,187,221)"，数据": [{"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}]，名称":"ABC"，"type":样条"}，{"color":"rgb(154,2,42)"，数据": [{"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}]，名称":"XYZ"，"type":样条"}]}); .highcharts-plot-bands-3 {剪切路径:url(#clip-triangle);} <脚本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，50250，-50 250"/></clipPath></defs></svg></div> 当我集成到我的项目/解决方案中时，相同的代码然后clip-path css源url被更改，并且它开始指向绝对路径(image-2)
在集成到我的项目中时，谁能告诉我为什么源URL指向解决方案的绝对路径?
最近几天我在这里苦苦挣扎.任何解决方案将不胜感激！
解决方案
很难说，也许构建项目会错误地更改文件的路径.
作为一种解决方法，您可以在第二个yAxis上定义这些plotBand，并为此轴设置不同的宽度.
{LinkedTo:0，标题: {文字:"}，宽度:25，标签: {启用:false}，plotBands:[{颜色:'rgb(204,0,0)'，从:0，至:30.99，zIndex:3}，{颜色:'rgb(226,113,113)'，来自:31，至:44.99，zIndex:3}，{颜色:'rgb(247,209,34)'，来自:45，至:54.99，zIndex:3}，{颜色:'rgb(136,207,136)'，来自:55，至:68.99，zIndex:3}，{颜色:'rgb(68,180,68)'，来自:69，至:87.99，zIndex:3}，{颜色:'rgb(0,153,0)'，来自:88，至:100，zIndex:3}]，} 演示: https://jsfiddle.net/BlackLabel/1yjwr4ck/
I need to override highcharts plotband div through css clip-path(source url - image-1) that I achieved in jsfiddle - https://jsfiddle.net/1ojphezv/1/ which is working fine for me.
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>
The same code when I integrate into my project/solution then clip-path css source url gets change and it starts pointing to the absolute path (image-2)
Can anyone tell me, while integrating into my project, why the source url pointing to the absolute path of the solution?
I am struggling here for the last couple of days. Any solution would be really appreciated!!
解决方案
Hard to say, maybe building your project changes the path of the file wrongly.
As a workaround, you can define those plotBands on the second yAxis and set a different width for this axis.
{
linkedTo: 0,
title: {
text: ""
},
width: 25,
labels: {
enabled: false
},
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
}
],
}
Demo: https://jsfiddle.net/BlackLabel/1yjwr4ck/
这篇关于在解决方案中使用时，css剪切路径源URL发生更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
