feOffset
Фильтр feOffset предназначен для смещения исходного изображения в заданном направлении. Это бывает нужно для создания, например, эффекта падающей тени. Структура фильтра достаточно простая (рис. 8.2):
Значения атрибутов dx и dy задают смещение изображения в горизонтальном и вертикальном направлениях. В табл. 8.2 приводятся примеры использования этого фильтра.
Таблица
8.2.
Фильтр feOffset.
| № |
Код |
Вид в браузере |
| 8.2.1 |
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="250" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feOffset1.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="250" height="200">
<feImage xlink:href="#MyImage" result="image1"/>
<feOffset in="image1" dx="0" dy="0"/>
</filter>
<image id="MyImage" x="10" y="10"
width="186" height="125" xlink:href="sea1.jpg"/>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter)"/>
<!--Рамка вокруг рисунка-->
<rect x="10" y="10" width="186" height="125"
style="stroke:green; stroke-width:5; fill:none;stroke-dasharray:5"/>
</svg>
Листинг
8.2.1.
Пример feOffset1.svg
|
 |
| Описание |
|---|
| Значения атрибутов: dx="0" dy="0". Рисунок находится в исходной позиции. Для указания его расположения сверху добавляется пунктирная рамка. |
| № |
Код |
Вид в браузере |
| 8.2.2 |
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="250" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feOffset2.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="250" height="200">
<feImage xlink:href="#MyImage" result="image1"/>
<feOffset in="image1" dx="20" dy="10"/>
</filter>
<image id="MyImage" x="10" y="10"
width="186" height="125" xlink:href="sea1.jpg"/>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter)"/>
<!--Рамка вокруг рисунка-->
<rect x="10" y="10" width="186" height="125"
style="stroke:green; stroke-width:5; fill:none;stroke-dasharray:5"/>
</svg>
Листинг
8.2.2.
Пример feOffset2.svg
|
 |
| Описание |
|---|
| Значения атрибутов: dx="20" dy="10". Рисунок смещается. |
| № |
Код |
Вид в браузере |
| 8.2.3 |
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="250" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feOffset3.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="250" height="200">
<feImage xlink:href="#MyImage" result="image1"/>
<feOffset in="image1" dx="50" dy="30"/>
</filter>
<image id="MyImage" x="10" y="10"
width="186" height="125" xlink:href="sea1.jpg"/>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter)"/>
<!--Рамка вокруг рисунка-->
<rect x="10" y="10" width="186" height="125"
style="stroke:green; stroke-width:5; fill:none;stroke-dasharray:5"/>
</svg>
Листинг
8.2.3.
Пример feOffset3.svg
|
 |
| Описание |
|---|
Значения атрибутов: dx="50" dy="30". Для фильтра myFilter задана область действия при помощи атрибутов следующей строко кода:<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10"
width="250" height="200"> |
| № |
Код |
Вид в браузере |
| 8.2.4 |
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="250" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feOffset4.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage" result="image1"/>
<feOffset in="image1" dx="50" dy="30"/>
</filter>
<image id="MyImage" x="10" y="10"
width="186" height="125" xlink:href="sea1.jpg"/>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter)"/>
<!--Рамка вокруг рисунка-->
<rect x="10" y="10" width="186" height="125"
style="stroke:green; stroke-width:5; fill:none;stroke-dasharray:5"/>
</svg>
Листинг
8.2.4.
Пример feOffset4.svg
|
 |
| Описание |
|---|
Величина смещения совпадает с предыдущим примером. Но здесь область действия фильтра меньше:<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125"> |
Мы рассмотрели применение фильтра feOffset в чистом виде, без других фильтров. Попробуйте самостоятельно создать сочетание этого фильтра с feGaussianBlur для получения эффекта падающей тени в заданном направлении.
