Предыстория:
- Цель: создать треугольную тень, которая может быть применена через CSS и не зависит от масштаба (т.е. вектор, а не растровое изображение).
- После долгих исследований (я, конечно, открыт для альтернатив) я решил использовать фоновое изображение SVG в качестве uri данных (чтобы избежать дополнительного HTTP-запроса).
- Я знаю, что это может работать: http://jsfiddle.net/6WAtQ/
Где я застрял:
-
Я создал простой треугольник svg с эффектом размытия Gaussian, если он написан непосредственно в HTML (в отличие от CSS), svg работает отлично: http://jsfiddle.net/RAKWB/
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <polygon points="200,0 200,200 0,200" filter="url(#f1)"/> </svg>
-
Итак, я попытался воспроизвести выше (http://jsfiddle.net/6WAtQ/), используя собственный треугольник svg,
- Я заменил хэш-знаки на "% 23", но без костей
-
Не работает: http://jsfiddle.net/ZPWxK/1/
body { background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>"); }
Мысли?