SVG not displaying Correctly in IE

Dashboard
1

Hi, I'm probably doing something stupid here, but I'm after some guidance.

I have a dynamic svg image, which represents some perimeter beams, updated via mqtt.

The code for the template node is as below:

<svg version="1.1" id="Layer_1" width="380" height="300" xmlns="http://www.w3.org/2000/svg">
<line x1="100" y1="100" x2="250" y2="100" style="stroke:rgb({{msg.payload.Beam1}});stroke-width:5" />
<text x="150" y="90" class="small">Beam 1</text>
<line x1="250" y1="100" x2="250" y2="250" style="stroke:rgb({{msg.payload.Beam2}});stroke-width:5" />
<text x="260" y="150" class="small" style="writing-mode: tb; glyph-orientation-vertical: 0;">Beam 2</text>
<line x1="250" y1="250" x2="100" y2="250" style="stroke:rgb({{msg.payload.Beam3}});stroke-width:5" />
<text x="150" y="265" class="small">Beam 3</text>
<circle cx="110" cy="240"   r="5"  />
<line x1="100" y1="250" x2="100" y2="100" style="stroke:rgb({{msg.payload.Beam4}});stroke-width:5" />
<text x="90" y="150" class="small" style="writing-mode: tb; glyph-orientation-vertical: 0;">Beam 4</text>

  <line x1="0" y1="700" x2="100" y2="700" style="stroke:rgb({{msg.payload.Beam5}});stroke-width:5" />
<line x1="0" y1="700" x2="15" y2="685" style="stroke:rgb({{msg.payload.Beam5}});stroke-width:5" />
<line x1="0" y1="700" x2="15" y2="715" style="stroke:rgb({{msg.payload.Beam5}});stroke-width:5" />
<text x="25" y="720" class="small">Beam 5</text>
  
 <circle cx="10" cy="10"   r="5" style="stroke:rgb({{msg.payload.PIR1}});stroke-width:5" />
 <text x="18" y="10" class="small">PIR 1</text>
 <circle cx="70" cy="10"  r="5" style="stroke:rgb({{msg.payload.PIR2}});stroke-width:5" />
 <text x="78" y="10" class="small">PIR 2</text>
 <circle cx="150" cy="10" r="5" style="stroke:rgb({{msg.payload.PIR3}});stroke-width:5" />
 <text x="158" y="10" class="small">PIR 3</text>
 <circle cx="220" cy="10"  r="5" style="stroke:rgb({{msg.payload.PIR4}});stroke-width:5" />
 <text x="228" y="10" class="small">PIR 4</text>
 
 <style>
    .small { font: 13px sans-serif; }

</style>


</svg>

Running this on chrome, it renders correctly, however on IE, the dynamic parts of this are missing:
image

When I inspect that part of the image from IE, it shows the variable name

But when inspecting that part in chrome, it shows the value of the variable

Any advice would be greatly appreciated. Sorry, there are some images missing, I'll add them below

2

image
image1320×221 19.5 KB

3

Googling for svg IE does throw up a number of issues, though whether one of those is the problem I don't know.

4

Running this on chrome, it renders correctly - how it should look:

image

5

Thanks Colin, I have tried a few of the suggestions relating to compatibility but to no avail.

6

James, it is my understanding that IE has no support for SVG and the the plugin is kind of broken. I think the IE replacement is supposed to have better support but I've given up on MS and just gone with FF and Chrome. I don't do web dev so I can get away with that. :wink:

7

If your browser's dev console is seeing the mustache syntax {{msg.payload.Beam1}} then the template is not being evaluated properly. Are you using the core template node, or the dashboard's ui_template node?

I find that sometimes I have to use the regular template node to generate a proper html/js/css/svg page -- then wire the output to a ui_template node with the default content:

<div ng-bind-html="msg.payload"></div>

Whether that works with SVG content, I can't say for sure, but it might be worth a try...

8

Hi, I am using the ui_template node - will try the template node instead

Thanks