我不可能是唯一遇到这个问题的人，但我的搜索让我迷失了方向。
我有一个使用渐变填充的自定义 Ext.draw.Component。我的理解是旧的浏览器不支持渐变，但我认为 Sencha 通过将 CSS 添加到渲染的对象来解决这个问题。
Chrome中的组件：
IE
中的
组件：
我的问题是：
- Ext.js 可以将渐变渲染到 IE8 和 IE9 吗？（IE10显示正常）
- 有没有办法确定浏览器是否不会渲染渐变，我可以只显示其他东西（即，如果没有白色省略号，IE 中的组件看起来不会那么糟糕）？
更新
这是生成红绿灯的代码。http://jsfiddle.net/wilsjd/Ts2qU/10/
var sencha = Ext.create('Ext.draw.Component', {
width: 170,
height: 170,
renderTo: this.get('elementToRenderTo'),
gradients: [{
id: 'middleGradient',
angle: 180,
stops: {
0: {
color: this.get('backgroundColor'),
opacity: 1
},
50: {
color: this.get('backgroundColor'),
opacity: .6
},
100: {
color: this.get('backgroundColor'),
opacity: 1
}
}
}, {
id: 'lightGradient1',
angle: -90,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}, {
type: 'radial',
id: 'radialGradient1',
centerX:123.88702,
centerY:391.47498,
radius:166.47372,
focalX:124.57159,
focalY:391.47498,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}],
items: [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: 'url(#middleGradient)',
stroke: 'none'
}, {
type: "circle",
radius: 140,
x:224,
y:896,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('goodColor')
}, {
type: "circle",
x:224,
y:214,
radius:140,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('poorColor')
}, {
type: "circle",
x:224,
y:555,
radius: 140,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('cautionColor')
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 156,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 498,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 838,
fill: 'url(#lightGradient1)'
}, {
type: "text",
text: this.get('poorValue'),
x: poorValueX,
y: 210,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('cautionValue'),
x: cautionValueX,
y: 550,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('goodValue'),
x: goodValueX,
y: 890,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: poorLabel,
x: 500,
y: 210 + poorChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: cautionLabel,
x: 500,
y: 550 + cautionChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: goodLabel,
x: 500,
y: 890 + goodChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('title'),
x: 0,
y: 0,
fill: "Black",
font: "100px bold"
}, {
type: "text",
text: "Total = " + this.get('total'),
x: 100,
y: 1150,
fill: "Black",
font: "80px bold"
}]
});