javascript - raphael Canvas 图像在 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>

更新:想通了，我必须在每个“填充”:“透明”下添加“不透明度”:“0.0”。我更新了代码以反射(reflect)这一点。

Answer 1

我想通了，我必须在每个 'fill': 'transparent' 下添加 'opacity': '0.0'。我更新了代码以反射(reflect)这一点。

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();