SVG Filter: работает только в Chrome, но не в других браузерах - PullRequest
Новая
       8

SVG Filter: работает только в Chrome, но не в других браузерах

0 голосов
/ 01 июня 2018

Простая демонстрация ошибки здесь: https://codepen.io/mknepprath/pen/mKeObo

Откройте в Chrome, чтобы посмотреть, как это должно выглядеть.

Проблемы:

  • В Safari фильтркажется, не применяется или применяется только частично ... это другое
  • В Firefox вообще ничего не появляется - кажется, что он скрывает фильтр и div, к которому применяется фильтр.

Как мне заставить это работать согласованно во всех браузерах?

html: 

<svg class='a'>
  <defs>
    <filter id='hey'>
      <feColorMatrix
        type='matrix'
        result='darken'
        x='0'
        y='0'
        width='200px'
        height='100px'
        values='.2 .05  .05 0 .35
                .05 .2  .05 0 .35
                .05 .05 .2  0 .35
                0   0    0  1 0'
      />
      <feColorMatrix
        type='matrix'
        result='node'
        x='0'
        y='0'
        width='200px'
        height='100px'
        values='1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0'
      />
      <feMerge>
        <feMergeNode in='darken' />
        <feMergeNode in='node' />
      </feMerge>
    </filter>
  </defs>
</svg>
<div class='b' style='filter: url(#hey)'></div>

css: 

.a {
  display: none;
}

.b {
  width: 200px;
  height: 100px;
  background: peachpuff;
}

1 Ответ

0 голосов
/ 02 июня 2018

Chrome принимает неверный синтаксис и пытается извлечь из него выгоду, Firefox, как правило, этого не делает.

  • Использование отображения: ни один не выводит SVG из DOM, поэтому CSS не может найти стильбольше.Сделайте SVG нулевым размером, поместите его ниже содержимого или используйте видимость: скрытый
  • По крайней мере, в SVG 1.1 вы не должны быть в состоянии использовать «px», «em» и т. Д. Для измерения вашего фильтраэлементы.(И вам не нужно измерять размеры feColorMatrixes - размеры рассчитываются автоматически по умолчанию.) 

.a {
  width: 0;
  height: 0;
}

.b {
  width: 200px;
  height: 100px;
  background: peachpuff;
}
<svg class="a">
  <defs>
    <filter id="hey">
      <feColorMatrix
        type="matrix"
        result="darken"
        values=".2 .05  .05 0 .35
                .05 .2  .05 0 .35
                .05 .05 .2  0 .35
                0   0    0  1 0"
      />
      <feColorMatrix
        type="matrix"
        result="node"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0"
      />
      <feMerge>
        <feMergeNode in="darken" />
        <feMergeNode in="node" />
      </feMerge>
    </filter>
  </defs>
</svg>
<div class="b" style="filter: url(#hey)"></div>
...