Internet Explorer 中的 Cumulocity SCADA 小部件答案

【问题标题】：Cumulocity SCADA widget in Internet ExplorerInternet Explorer 中的 Cumulocity SCADA 小部件
【发布时间】：2016-07-28 02:01:00
【问题描述】：

我的 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>
...

所以，实际上只是一个应该根据属性值改变颜色的矩形，该属性链接到我的一个设备的属性。适用于 Chrome/FF，但在 IE 中，根本不应用任何样式（矩形是黑色的，不会随着道具的状态而改变）。我应该做更多/不同的事情吗？

【问题讨论】：

标签： internet-explorer svg cumulocity

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

请不要在私信中解决问题，QA 的目的是帮助所有访问本网站的人 - 编辑相关问题/答案或在需要澄清或其他信息时使用 cmets
我改回答了。现在我只是回答有关 IE11 中 SCADA 小部件的一般问题的部分。我也删除了我的建议的部分。希望编辑后的答案更适合指南。
感谢您的回答迈克尔，我按照我的问题来支持。 Florian 找到解决方案后，我会回来发布解决方案。