Первое решение, которое я встречал в интернете, заключалось в определении браузера через джаваскрипт, и в замене тега object на тег img для webkit-браузеров, так как при вставке svg через img прозрачный бэкграунд отображается правильно. Второе решение сводилось к использованию inline-svg, но для этого сама страница должна быть корректным xhtml-докуметом, что очень не по нраву IE.
Совершенно случайно было найдено третье решение. Настолько элементарное, что удивительно, что никто этого ещё не попробовал (если в этом я ошибаюсь, пожалуйста сообщите мне). Достаточно в svg-файле после тега <svg> написать следующие строки:
- <style>
- svg { -webkit-background-clip: text; }
- </style>
* This source code was highlighted with Source Code Highlighter.
И тут же свершается магия. Вот ссылка на рабочий пример. Спасибо, на этом всё.
Источник: Хабрахабр - Масштабируемая векторная графика
Оригинальная страница: SVG с прозрачным фоном в Chrome и Safari
Комментариев нет:
Отправить комментарий