1

I'm using this SVG to create a simple signal level meter:

 <svg id="outdoor-meter" class="svg-flow" svg-flow="current-temp,dx=-5,dy=-3.5">
          <svg viewBox="0 0 640 512" class="signal-meter" width="2" height="1.6">
            <rect x= "24" y="384" width="80" height="128" class="signal-bar-1"/>
            <rect x="152" y="288" width="80" height="224" class="signal-bar-2"/>
            <rect x="280" y="192" width="80" height="320" class="signal-bar-3"/>
            <rect x="408" y= "96" width="80" height="416" class="signal-bar-4"/>
            <rect x="536" y=  "0" width="80" height="512" class="signal-bar-5"/>
            <line style="display: none; stroke-width: 40px; stroke: rgb(255, 0, 0);" class="no-signal" x1="64" y1="40" x2="576" y2="424"/>
          </svg>
        </svg>

In Chrome, this looks like this (the small green and blue bar graphs below):

enter image description here

In Firefox, these signal level meters are completely invisible, although there are no other SVG problems on the rest of the chock-full-of-SVG page.

The only CSS classes that directly affect rendering are the signal-bar-x classes (which decide which bars are visible), no-signal (to display a red slash), and a programmatically-applied color filter. The svg-flow class doesn't have any associated CSS; it's used for JavaScript to find and reposition the image as needed.

When inspecting the signal meter's element in Firefox there's no sign that it's been made invisible by CSS, or accidentally positioned offscreen. What is weird is that when I hover over the outer-level <svg> tag, a HUGE portion of the screen is highlighted, and the element is supposedly over 1300x800 pixels. Doing the same in Chrome, only the tiny and visible meter is highlighted, reporting a much more reasonable size of around 12x11 pixels.

Full source code can be found here: https://github.com/kshetline/aw-clock

And there's a live demo here: https://weather.shetline.com/

..but unfortunately, that's only good for seeing that all of the rest of the SVG works, since the web site doesn't have its own wireless temperature/humidity sensors, which is what the signal meters are for.

Any ideas on how to make this SVG work for Firefox?

enxaneta
  • 31,608
  • 5
  • 29
  • 42
kshetline
  • 12,547
  • 4
  • 37
  • 73
  • Hey mate I just change the width and height of your svg element (like times 100 cuz your width is 2px, why is that is beyond me) and all components are where they should be. Ah yes, I did it on firefox. Might be issue with overflow hidden as default on firefox or something. – Mortimer Mar 04 '20 at 22:19
  • @Mortimer, I've narrowed the problem down, and it's not just the width and the height -- changing those can help make the element visible, but still won't get it to exactly the right size and position. There are two problems. (1) Firefox doesn't like `setAttribute('x', value)` or `setAttributeNS(null, 'x', value)`, either of which make Chrome happy. Firefox wants `setAttributeNS('http://www.w3.org/1999/xlink', 'x', value)` -- which Chrome doesn't like! (2) Chrome is fine with unit-less values like "10", but Firefox wants units, like "10px". The thing is, this really should be a unit-less... – kshetline Mar 05 '20 at 00:36
  • ...value, or more specifically, without a literally-specified unit, using the implied units of the containing viewBox. What's weird is that Firefox doesn't care about the actual unit -- it treats px, em, cm, etc., all the same, and treats no unit at all very weirdly. – kshetline Mar 05 '20 at 00:39
  • It's worse than I thought! Simply calling `getBBox()` on some elements (for which the function is definitely defined) throws an exception. I'm beginning to think Firefox just isn't up to this task. – kshetline Mar 05 '20 at 01:56
  • Ok try then using canvas, it's lighter and much quicker then svg and I haven't any issue with it on any browser. Or if you can't just use canvas then check which browser it is and take appropriate actions. Here is how to - https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser – Mortimer Mar 05 '20 at 10:27
  • @Mortimer... found the fix, no change to canvas needed. (I've worked a lot with canvasses before, as can be seen here: http://skyviewcafe.com/) SVG is much better in this instance (once the browser differences are worked out!) for smooth scaling. – kshetline Mar 05 '20 at 19:52

1 Answers1

0

Wow... this turned out to be a simple change, but surprising that it had such consequences. I merely had to move width="2" height="1.6" from the inner svg tag to the outer svg tag.

<svg id="outdoor-meter" class="svg-flow" svg-flow="current-temp,dx=-5,dy=-3.5" width="2" height="1.6">
  <svg viewBox="0 0 640 512" class="signal-meter">
    ...

Without the width and height set out the outside, not only was Firefox confused about the size and placement of the graphics, but the JavaScript code that repositioned these elements crashed with a not-so-helpful, generic NS_ERROR_FAILURE when it called the getBBox() function for these elements.

I wouldn't have had two layers of SVG tags at all, but that proved necessary for adjusting the position of the signal meter as a whole when other elements changed position or size, and for applying a color filter.

kshetline
  • 12,547
  • 4
  • 37
  • 73