0

我的 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 中，根本不应用任何样式（矩形为黑色，不会随道具的状态而变化）。我应该做更多/不同的事情吗？

4

2 回答 2

1

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

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

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

于 2016-07-27T18:01:00.447 回答
0

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

于 2016-07-21T14:17:53.870 回答