Почему этот SVG хорошо работает на Chrome, но невидим на Firefox? - PullRequest
Новая
       13

Почему этот SVG хорошо работает на Chrome, но невидим на Firefox?

1 голос
/ 05 марта 2020

Я использую этот SVG для создания простого измерителя уровня сигнала: 

 <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>

В Chrome это выглядит следующим образом (маленькие зеленые и синие гистограммы ниже):

enter image description here

В Firefox эти измерители уровня сигнала полностью невидимы, хотя на остальной части страницы с полным заполнением SVG других проблем SVG нет.

Единственный CSS классами, которые непосредственно влияют на рендеринг, являются классы signal-bar- x (которые определяют, какие полосы видны), no-signal (для отображения красного цвета sh) и программно применяемый цветной фильтр. Класс svg-flow не имеет ассоциированного CSS; он используется для JavaScript для поиска и изменения положения изображения по мере необходимости.

При проверке элемента измерителя сигнала в Firefox нет никаких признаков того, что оно стало невидимым для CSS или случайно расположено за пределами экрана. Что странно, так это то, что при наведении указателя мыши на тег <svg> внешнего уровня выделяется ОГРОМНАЯ часть экрана, и размер элемента превышает 1300x800 пикселей. Делая то же самое в Chrome, выделяется только крошечный и видимый метр, сообщая о гораздо более разумном размере около 12x11 пикселей.

Полный исходный код можно найти здесь: https://github.com/kshetline/aw-clock

И здесь есть живая демонстрация: https://weather.shetline.com/

.. но, к сожалению, это хорошо только для того, чтобы увидеть, что все остальные SVG работают, так как веб-сайт не имеет своих собственных беспроводных датчиков температуры / влажности, для чего нужны измерители сигнала.

Есть идеи, как заставить этот SVG работать для Firefox?

1 Ответ

0 голосов
/ 05 марта 2020

Ух ты ... это оказалось простым изменением, но удивительно, что оно имело такие последствия. Мне просто нужно было переместить width="2" height="1.6" от внутреннего тега svg к внешнему тегу svg. 

<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">
    ...

Если ширина и высота не указаны снаружи, Firefox не только запутался размер и расположение графики, но код JavaScript, который переставил эти элементы, потерпел неудачу с не очень полезным обобщением c NS_ERROR_FAILURE, когда он вызвал функцию getBBox() для этих элементов.

У меня не было бы двух слоев SVG-тегов вообще, но это оказалось необходимым для регулировки положения измерителя сигнала в целом, когда другие элементы изменили положение или размер, и для применения цветового фильтра.

...