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

Question

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

Исправлено, но не на iOS, где гораздо более старая сборка WebKit

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

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

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

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

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

Есть ли какое-то хорошее решение для этого?

Answer 1

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

Я могу использовать inline SVG / XML. В этом случае я получаю прозрачность и возможность проходить узлы SVG DOM.

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

Answer 2

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