Internet Explorer 中的 Cumulocity SCADA 小部件

Question

我的 SCADA 小部件在 Chrome 和 Firefox 中显示正确，但在 Internet Explorer 中显示不正确（我试过 IE 11）。也许这是一个普遍的 IE/.svg 问题，或者我弄错了，这里是我的 .svg 的摘录：

...
<g
    id="layer1-1-7"
    inkscape:label="Layer 1"
    transform="translate(90.285715,99.790733)">
    <!--{{state1}}-->
    <rect ... ng-class="{spotFree: state1=='free', spotOccupied: state1!='free'}" ... />
    ...
</g>
...
<style
    id="style3348"
    type="text/css">
    .spotOccupied {
        fill:#ff0000;
    }
    .spotFree {
        fill:#00ff00;
    }
</style>
...

所以，实际上只是一个矩形，它应该根据属性的值改变颜色，link 到我的一个设备的属性。适用于 Chrome/FF，但在 IE 中，根本不应用任何样式（矩形是黑色的，不随道具的状态而改变）。有什么more/different我应该做的吗？

Answer 1

我在 Cumulocity 使用我们自己的 SCADA 小部件检查它们是否工作正常。这些正在 IE11 上工作。所以我无法确认 IE11 是否存在一般 SCADA 小部件问题。

Answer 2

这似乎是 IE 的问题 - 它不处理动态添加的 <style> 标签。讨论了这个问题，例如here in general and here 在 SVG 的上下文中。 SCADA 小部件中的 SVG 文件是动态插入的，因此它们会受到影响。您可以检查是否在打开仪表板的情况下在 IE11 的控制台中执行以下 JavaScript 代码（取自第二个 link），颜色将显示在 SVG 上。

_.each(document.querySelectorAll('style'), function (s) {
  s.textContent += '';
});

目前我没有看到好的解决方法。暂时你可以为每个元素直接分配 fill 属性和 ng-style 但它显然重复代码。我认为您可以向 Cumulocity 提交一张票以改进 SCADA 小部件，以便它触发对插入的 SVG 文件中的 <style> 标签的评估。

Internet Explorer 中的 Cumulocity SCADA 小部件

Cumulocity SCADA widget in Internet Explorer

internet-explorer

svg

cumulocity