拉斐尔画布图像在 IE8 中无法正确显示答案

【问题标题】：raphael canvas image not displaying correctly in IE8拉斐尔画布图像在 IE8 中无法正确显示
【发布时间】：2014-01-28 15:12:33
【问题描述】：

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

在 Firefox 和 google chrome 中，它可以正确显示背景图像。它在 IE8 中无法正确显示（如下所示）。

下面是它在 FF 和 google chrome 中的样子

#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”：“透明”。我更新了代码以反映这一点。

【问题讨论】：

很高兴你解决了它。将解决方案作为答案发布在下面，并使用勾号将其标记为“已接受”。这将帮助网站上找到此问题的其他人。 :)

标签： javascript html css internet-explorer-8 raphael

【解决方案1】：

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

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

【讨论】：