English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Учебник по SVG

Элементы SVG

Тень в SVG

В SVG для отображения эффекта тени используется элемент <feOffset>. Для создания эффекта тени мы берем графическое изображение SVG и перемещаем его на了一点 в плоскости xy, Internet Explorer и Safari не поддерживают фильтры SVG!

Онлайн пример

Ниже реализуется эффект тени фона фиолетового цвета:

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0" width="200%" height="200%">
　　　　　　<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
　　　　　　<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
　　　　　　<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
　　　　</filter>
　　</defs>
　　<rect width="90" height="90" stroke="blue" stroke-width="3" fill="purple" filter="url(#p1)" />
　　</svg>
Тестирование看看‹/›

Внимание: Internet Explorer 9 и более ранние версии не поддерживают фильтры SVG.

Эффект после выполнения:

Объяснение использования

  • Атрибут id элемента <filter> определяет уникальное имя шаблона.

  • Атрибут filter элемента <rect> используется для связи элемента с фильтром "p1".

Создание чёрной тени

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<defs>
　　　　<filter id="f1" x="0" y="0" width="200%" height="200%">
　　　　　　<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
　　　　　　<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
　　　　　　<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
　　　　</filter>
　　</defs>
　　<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
Проверьте ‹/›

Эффект после выполнения:

Внимание: Internet Explorer 9 и более ранние версии не поддерживают фильтры SVG.

Полное руководство по примерам SVGЭффект размытия в SVG