Прозрачный SVG в iOS WebKit

У WebKit была ошибка, из-за которой встроенный SVG (с помощью <embed> или <image> ) имел белый фон вместо прозрачного.

Он был исправлен, но не на iOS, где есть намного более старая версия WebKit

Есть ли какое-то хорошее обходное решение для этого? Мне отчаянно нужен прозрачный фон.

Я знаю два субоптимальных обходных решения:

  • Используйте <img> . – Я не могу этого сделать, потому что дерево DOM / XML SVG, вставленное как imgs, не может быть перемещено / обработано.

  • Маска <object> или <embed> с самим собой. Удивительно, что старый WebKit может обнаружить прозрачность, если SVG используется как маска. Однако я считаю это уродливым решением:

    <object style="-webkit-mask-image:url(image.svg);" data="image.svg" type="image/svg+xml" />

Есть ли хорошее решение?

Я нашел решение.

Я могу использовать встроенный SVG / XML. В этом случае я получаю как прозрачность, так и способность пересекать узлы SVG DOM.

Единственным недостатком является то, что я должен использовать правильную разметку XML с правильными заголовками Content-type ( text/xml как-то работает лучше всего, я не знаю почему)

Об ошибках, о которых вы говорите, хорошо известно. Если это на iOS, вам действительно нужно использовать векторную графику? Почему бы не использовать PNG с наследованием прозрачности?

  • Почему Apple относится к этим приложениям специально?
  • Проблемы с webkit translate3d (peek-thru)
  • Получение всех файлов cookie из WKWebView
  • Youtube iframe встраивается с масштабированием webkit-transform на iOS
  • Как остановить MPAVItem сбой моего приложения iOS с видео в моем UIWebView?
  • Переход CSS во время touchmove на устройствах iOS 7 не запускается
  • Предотвращение наложения серым цветом на сенсорный экран в мобильном браузере Safari / Webview
  • Как запретить WKWebView неоднократно запрашивать разрешение на доступ к местоположению?
  • Как получить слово в указанном месте на WKWebView?
  • iOS 8 UIWebview Delegate: WebKit отменил неперехваченное исключение в webView: didFinishLoadForFrame:
  • видимые полосы прокрутки IOS с "webkit-overflow-scrolling: touch"
  • Давайте будем гением компьютера.