Только в Safari, почему SVG-фильтр feColorMatrix вызывает отсечение? - PullRequest
Новая
       8

Только в Safari, почему SVG-фильтр feColorMatrix вызывает отсечение?

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

Я использую графику SVG для отображения двух индикаторов уровня сигнала. Полосы индикаторов зеленого цвета, но, поскольку в данный момент отображается сигнал только от одного источника, я использую фильтр для тонирования индикатора для неиспользуемого синего сигнала. Вот как выглядят счетчики на Chrome или Firefox:

screenshot Chrome

Вот что происходит в Safari (обратите внимание на синий индикатор справа обрезается по левому и правому краям):

screenshot Safari

Если я использую веб-консоль Safari для проверки элемента, затем снимите флажок с фильтра, отсечение уходит, ничего не меняя (конечно же, индикатор снова станет зеленым). Я могу быть уверен, что это фильтр, вызывающий отсечение, а не какую-то другую проблему, такую ​​как неправильное позиционирование или перекрытие от непрозрачного компонента.

web console

Это Вот как определяется фильтр 

        <filter id="meter-tint">
          <feColorMatrix type="matrix" values="1 0 0 0 0 0 0.5 0 0 0 0 1 1 0 0 0 0 0 1 0"></feColorMatrix>
        </filter>

И это SVG, к которому применяется фильтр: 

        <svg id="outdoor-meter-2" class="svg-flow" svg-flow="current-temp,dx=-3.8,dy=-3.5" width="2" height="1.6">
          <svg viewBox="0 0 640 512" class="signal-meter">
            <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>

Обновление :

Просто чтобы подчеркнуть, насколько это странно и противоречиво, я обнаружил, что добавление невидимого прямоугольника, подобного этому:

<rect x="0" y="0" width="640" height="512" style="fill: rgba(0, 0, 0, 0)"></rect>

... исправляет все отсечения, кроме самой левой полосы, и this:

<rect x="0" y="0" width="640" height="640" style="fill: rgba(0, 0, 0, 0)"></rect>

... исправляет все обрезки влево и вправо, но смещает график c вверх на несколько пикселей. height="639" недостаточно, чтобы исправить какое-либо отсечение слева, тогда увеличение до 640 исправляет все это.

Это не имеет смысла!

...