Я ссылаюсь на некоторые фильтры SVG в определении класса в HTML-документе, как показано ниже ...
<!DOCTYPE HTML>
<html lang="en">
<head>
<svg>
<filter id="red" color-interpolation-filters="sRGB" x="0" y="0" height="100%" width="100%">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
</filter>
</svg>
<style>
.red {blend-mode:lighten; mix-blend-mode:lighten; opacity:1; -webkit-filter:url(#red); filter:url(#red);}
</style>
</head>
.......etc..
Это имеет эффект, который я ищу в Firefox, заставляет Chrome бороться, а затем падает. Моя веб-страница не работает вообще (белый экран) в iphone Safari.
Правильно ли я определил и разместил SVG в правильном месте. Или есть что-то не так в определении стиля класса?