raphael画布图像在IE8中无法正确显示

Question

我为raphael使用转速计库：https://github.com/codefront/raphael.tachometer.js

在firefox和google chrome中，它会正确显示背景图片。它在IE8中无法正确显示（如下所示）。

以下是它在FF和谷歌浏览器中的外观

#speedometer {
    background: transparent url('/assets/images/speedometer.png') no-repeat;
    width: 381px;
    height: 380px;
    position: absolute;
    top: -30px;
    right: -20px;
}

调用转速计实例：

var t = Raphael('speedometer').tachometer(50, 
    {
        numberMin: 0,
        numberMax: 8000,
        interactive: true,
        scaleAngleStart: 77,
        scaleAngleEnd: 285,
        scaleWidth: 3,
        scaleLength: 10,
        frameSize: 6,
        boardAttr: {
          'stroke': 4,
      'fill': 'transparent',
      'opacity': '0.0'
        },
        frameSize: 6,
        outerFrameAttr: {
          'stroke': 'transparent',
          'stroke-width': 0.3,
      'fill': 'transparent',
      'opacity': '0.0'
        },
        innerFrameAttr: {
          'stroke': 'transparent',
          'stroke-width': 0.3,
          'fill': 'transparent',
      'opacity': '0.0'
        },
        needleAnimation: true,
        needleAnimationDuration: 6200,
        needleAnimationEasing: 'bounce',
    }
);

t.set(3400);
t.get();

显示速度表的html是：<div id="speedometer"></div>

更新：想通了，我不得不在每个'fill'下添加'opacity'：'0.0'：'transparent'。我更新了代码以反映这一点。

Answer 1

我想通了，我不得不在每个'fill'下添加'opacity'：'0.0'：'transparent'。我更新了代码以反映这一点。

var t = Raphael('speedometer').tachometer(50, 
{
    numberMin: 0,
    numberMax: 8000,
    interactive: true,
    scaleAngleStart: 77,
    scaleAngleEnd: 285,
    scaleWidth: 3,
    scaleLength: 10,
    frameSize: 6,
    boardAttr: {
      'stroke': 4,
      'fill': 'transparent',
      'opacity': '0.0'
    },
    frameSize: 6,
    outerFrameAttr: {
      'stroke': 'transparent',
      'stroke-width': 0.3,
      'fill': 'transparent',
      'opacity': '0.0'
    },
    innerFrameAttr: {
      'stroke': 'transparent',
      'stroke-width': 0.3,
      'fill': 'transparent',
      'opacity': '0.0'
    },
    needleAnimation: true,
    needleAnimationDuration: 6200,
    needleAnimationEasing: 'bounce',
});

t.set(3400);
t.get();