Ошибка ионного фильтра SVG в платформе Android - PullRequest
Новая
       11

Ошибка ионного фильтра SVG в платформе Android

0 голосов
/ 12 октября 2018

Я использую svg-фильтр в div.

Этот код отлично работает, когда я тестирую его на платформе браузера.

Однако, когда я устанавливаю его на платформу Android (используя ionic cordovaзапустить команду Android), приложение было сбой непосредственно без сообщения об ошибке.

Здесь html и css код. 

.circles {
    width: 60px;
    height: 19px;
    display: flex;
    //filter: url('#gooeyness');
    flex-direction: row;
    overflow: hidden;
    position: relative;
  }

  .circle,
  .circle-first,
  .circle-end{
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    //background: #A0D9F4;
    background: $text-content;
    cursor: pointer;
    height: 75%;
    width: 17%;
    margin: 4.2% 5%;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 700ms ease-in-out;
    transition: background-color 700ms ease-in-out;
  }

  .circle.active {
    border-color: white;
  }
<svg class="filter" version="1.1">
    <defs>
      <filter id="gooeyness">
        <!--<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>-->
        <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="gooey" />
        <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
      </filter>
    </defs>
  </svg>
  <div class="test-boxes">
    <div class="circles" style="filter: url('.#gooeyness');">
      <div class="circle-first" style="opacity: 0;"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle-end" style="opacity: 0;"></div>
      <div class="loader"></div>
    </div>
  </div>

Я обнаружил, что проблема была в том, что этот фильтр был добавлен.

filter: url ('# gooeyness')

Это не было логической проблемой в моем машинописном коде.Поэтому я протестировал другой файл svg, и возникла та же проблема.

Почему фильтр svg аварийно завершает работу ионного приложения на платформе Android?

1 Ответ

0 голосов
/ 12 октября 2018

Я вижу по крайней мере одну синтаксическую ошибку: 

<feColorMatrix in="blur" mode="matrix" ...

должно быть 

<feColorMatrix in="blur" type="matrix" ...

(только feBlend использует атрибут режима)

...