Фильтр позволяет тонировать изображение заданным цветом с произвольной степенью прозрачности. Структура этого фильтра выглядит следующим образом (рис. 8.1):
(рис 8.1) Структура фильтра feFloodАтрибуты feComposite. В табл. 8.1 приводятся примеры использования этого фильтра.
| № | Код | Вид в браузере |
|---|---|---|
| 8.1.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="200" height="450"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II</title>
<desc>
Пример feFlood1svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<image id="MyImage1" 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)"/>
<!--Вспомогательные изображения-->
<image x="10" y="155" width="186" height="125"
xlink:href="sea1.jpg"/>
<rect x="10" y="300" width="186" height="125"
fill="red" fill-opacity="0.3"/>
</svg>
|
 |
| Описание | ||
| Композиция, состоящая из красного прямоугольника (с прозрачностью 0.3) и исходного изображения. | ||
| № | Код | Вид в браузере |
| 8.1.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="200" height="450"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II</title>
<desc>
Пример feFlood2.svg
</desc>
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<filter id="myFilter2" filterUnits="userSpaceOnUse"
x="10" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.6'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse"
x="10" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.9'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter1)"/>
<rect x="10" y="155" width="186" height="125"
filter="url(#myFilter2)"/>
<rect x="10" y="300" width="186" height="125"
filter="url(#myFilter3)"/>
</svg>
|
 |
| Описание | ||
| Примеры различной прозрачности. Все остальные атрибуты одинаковы. | ||
| № | Код | Описание |
| 8.1.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="420" height="450"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II</title>
<desc>
Пример feFlood3.svg
</desc>
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse"
x="10" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<filter id="myFilter2" filterUnits="userSpaceOnUse"
x="10" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="green" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse"
x="215" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="blue" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<filter id="myFilter4" filterUnits="userSpaceOnUse"
x="215" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="yellow" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<filter id="myFilter5" filterUnits="userSpaceOnUse"
x="215" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="magenta" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
</defs>
<rect x="10" y="155" width="186" height="125"
filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125"
filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125"
filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125"
filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125"
filter="url(#myFilter5)"/>
<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125"
xlink:href="sea1.jpg"/>
</svg>
|
Примеры композиций, содержащих различные цвета. Все остальные атрибуты одинаковы. |
| Вид в браузере | ||
 |
||
| № | Код | Описание |
| 8.1.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="420" height="450"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II</title>
<desc>
Пример feFlood4.svg
</desc>
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse"
x="215" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<filter id="myFilter2" filterUnits="userSpaceOnUse"
x="10" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0" k2="1" k3="0" k4="0"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse"
x="215" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0" k2="0" k3="1" k4="0"/>
</filter>
<filter id="myFilter4" filterUnits="userSpaceOnUse"
x="10" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="1" k2="1" k3="1" k4="0"/>
</filter>
<filter id="myFilter5" filterUnits="userSpaceOnUse"
x="215" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0" k2="0.5" k3="0.5" k4="0"/>
</filter>
</defs>
<rect x="10" y="155" width="186" height="125"
filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125"
filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125"
filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125"
filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125"
filter="url(#myFilter5)"/>
<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125"
xlink:href="sea1.jpg"/>
<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
sea1.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
k1="0.4" k2="0.4" k3="1" k4="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
k1="0" k2="1" k3="0" k4="0"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
k1="0" k2="0" k3="1" k4="0"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
k1="1" k2="1" k3="1" k4="0"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
k1="0" k2="0.5" k3="0.5" k4="0"</text>
</svg>
|
Граничные значения атрибутов k1, k2, k3, k4 фильтра feComposite. |
| Вид в браузере | ||
 |
||
| № | Код | Описание |
| 8.1.5 | <?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="420" height="450"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II</title>
<desc>
Пример feFlood5.svg
</desc>
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>
<filter id="myFilter2" filterUnits="userSpaceOnUse"
x="215" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="over"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse"
x="10" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="in"/>
</filter>
<filter id="myFilter4" filterUnits="userSpaceOnUse"
x="215" y="155" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="out"/>
</filter>
<filter id="myFilter5" filterUnits="userSpaceOnUse"
x="10" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="atop"/>
</filter>
<filter id="myFilter6" filterUnits="userSpaceOnUse"
x="215" y="300" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3'
result='pict2'/>
<feComposite in="pict1" in2="pict2" operator="xor"/>
</filter>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter1)"/>
<rect x="10" y="155" width="186" height="125"
filter="url(#myFilter2)"/>
<rect x="10" y="300" width="186" height="125"
filter="url(#myFilter3)"/>
<rect x="215" y="10" width="186" height="125"
filter="url(#myFilter4)"/>
<rect x="215" y="155" width="186" height="125"
filter="url(#myFilter5)"/>
<rect x="215" y="300" width="186" height="125"
filter="url(#myFilter6)"/>
<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
operator="arithmetic"</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
operator="over"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
operator="in"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
operator="out"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
operator="atop"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
operator="xor"</text>
</svg>
|
Различные значения атрибута operator. |
| Вид в браузере | ||
 |
||
При совместном использовании фильтров feFlood и feComposite достигается не только тонировка изображения, но и смешивание пикселов исходного изображения и верхнего цвета.
Фильтр feOffset предназначен для смещения исходного изображения в заданном направлении. Это бывает нужно для создания, например, эффекта падающей тени. Структура фильтра достаточно простая (рис. 8.2):
(рис 8.2) Структура фильтра feOffsetЗначения атрибутов dx и dy задают смещение изображения в горизонтальном и вертикальном направлениях. В табл. 8.2 приводятся примеры использования этого фильтра.
| № | Код | Вид в браузере |
|---|---|---|
| 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>
|
 |
| Описание | ||
Значения атрибутов: 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>
|
 |
| Описание | ||
Значения атрибутов: 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>
|
 |
| Описание | ||
Значения атрибутов: 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>
|
 |
| Описание | ||
Величина смещения совпадает с предыдущим примером. Но здесь область действия фильтра меньше:<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
В результате рисунок "отсекается" по границе области. |
||
Мы рассмотрели применение фильтра feOffset в чистом виде, без других фильтров. Попробуйте самостоятельно создать сочетание этого фильтра с feGaussianBlur для получения эффекта падающей тени в заданном направлении.
Фильтр feMorphology предназначен для художественной обработки изображений. Его структура имеет следующий вид (рис. 8.3):
(рис 8.3) Структура фильтра feMorphologyАтрибут operator содержит два значения erode (сжатие) и dilate (растяжение). Первое значение сближает пиксели изображения на величину, определяемую атрибутом radius. Второе значение, наоборот, растягивает пикселы. Направление смещение можно задавать в виде отдельных значений горизонтальной и вертикальной составляющих. В табл. 8.3 приводятся примеры использования этого фильтра.
| № | Код | Вид в браузере |
|---|---|---|
| 8.3.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="210" height="150"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feMorphology1.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="200" height="200">
<feImage xlink:href="#MyImage" result="image1"/>
<feMorphology in="image1" radius="0" operator="erode"/>
</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)"/>
</svg>
|
|
| Описание | ||
Применение фильтра с атрибутом radius="0". Изображение не изменилось. |
||
| № | Код | Вид в браузере |
| 8.3.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="210" height="150"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feMorphology2.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="200" height="200">
<feImage xlink:href="#MyImage" result="image1"/>
<feMorphology in="image1" radius="2,2" operator="erode"/>
</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)"/>
</svg>
|
 |
| Описание | ||
Применение фильтра с атрибутом radius="2,2". Искажение картинки в горизонтальном и вертикальном направлениях. |
||
| № | Код | Вид в браузере |
| 8.3.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="210" height="150"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feMorphology3.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="200" height="200">
<feImage xlink:href="#MyImage" result="image1"/>
<feMorphology in="image1" radius="10,0" operator="erode"/>
</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)"/>
</svg>
|
 |
| Описание | ||
Применение фильтра с атрибутом radius="10,0". Получение эффекта смазывания в горизонтальном направлении. |
||
| № | Код | Вид в браузере |
| 8.3.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="210" height="150"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feMorphology4.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="200" height="200">
<feImage xlink:href="#MyImage" result="image1"/>
<feMorphology in="image1" radius="0,10" operator="erode"/>
</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)"/>
</svg>
|
 |
| Описание | ||
Применение фильтра с атрибутом radius="0,10". Получение эффекта смазывания в вертикальном направлении. |
||
| № | Код | Описание |
| 8.3.5 | <?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="420" height="600"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feMorphology5.svg
</desc>
<defs>
<filter id="myFilterErode1" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="image1"/>
<feMorphology in="image1" radius="0" operator="erode"/>
</filter>
<filter id="myFilterErode2" filterUnits="userSpaceOnUse"
x="10" y="135" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="image1"/>
<feMorphology in="image1" radius="2,2" operator="erode"/>
</filter>
<filter id="myFilterErode3" filterUnits="userSpaceOnUse"
x="10" y="260" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="image1"/>
<feMorphology in="image1" radius="10,0" operator="erode"/>
</filter>
<filter id="myFilterErode4" filterUnits="userSpaceOnUse"
x="10" y="385" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="image1"/>
<feMorphology in="image1" radius="0,10" operator="erode"/>
</filter>
<filter id="myFilterDilate1" filterUnits="userSpaceOnUse"
x="206" y="10" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="image1"/>
<feMorphology in="image1" radius="0" operator="dilate"/>
</filter>
<filter id="myFilterDilate2" filterUnits="userSpaceOnUse"
x="206" y="135" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="image1"/>
<feMorphology in="image1" radius="2,2" operator="dilate"/>
</filter>
<filter id="myFilterDilate3" filterUnits="userSpaceOnUse"
x="206" y="260" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="image1"/>
<feMorphology in="image1" radius="10,0" operator="dilate"/>
</filter>
<filter id="myFilterDilate4" filterUnits="userSpaceOnUse"
x="206" y="385" width="186" height="125">
<feImage xlink:href="sea1.jpg" result="image1"/>
<feMorphology in="image1" radius="0,10" operator="dilate"/>
</filter>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilterErode1)"/>
<rect x="10" y="135" width="186" height="125"
filter="url(#myFilterErode2)"/>
<rect x="10" y="260" width="186" height="125"
filter="url(#myFilterErode3)"/>
<rect x="10" y="385" width="186" height="125"
filter="url(#myFilterErode4)"/>
<rect x="206" y="10" width="186" height="125"
filter="url(#myFilterDilate1)"/>
<rect x="206" y="135" width="186" height="125"
filter="url(#myFilterDilate2)"/>
<rect x="206" y="260" width="186" height="125"
filter="url(#myFilterDilate3)"/>
<rect x="206" y="385" width="186" height="125"
filter="url(#myFilterDilate4)"/>
<!--Подписи-->
<text x="15" y="25" style="fill: white; font-size: 12px">
radius="0" operator="erode"</text>
<text x="15" y="150" style="fill: white; font-size: 12px">
radius="2,2" operator="erode"</text>
<text x="15" y="275" style="fill: black; font-size: 12px">
radius="10,0" operator="erode"</text>
<text x="15" y="405" style="fill: white; font-size: 12px">
radius="0,10" operator="erode"</text>
<text x="211" y="25" style="fill: white; font-size: 12px">
radius="0" operator="dilate"</text>
<text x="211" y="150" style="fill: white; font-size: 12px">
radius="2,2" operator="dilate"</text>
<text x="211" y="275" style="fill: black; font-size: 12px">
radius="10,0" operator="dilate"</text>
<text x="211" y="405" style="fill: white; font-size: 12px">
radius="0,10" operator="dilate"</text>
</svg>
|
Сопоставление нескольких изображений с применением значений erode и dilate атрибута operator. При значении erode заметно искажение размеров самого изображения. |
| Вид в браузере | ||
 |
||
| № | Код | Вид в браузере |
| 8.3.6 | <?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="300" height="250" viewBox="0 0 700 500"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feMorphology6.svg
</desc>
<defs>
<filter id="Erode3">
<feMorphology operator="erode" in="SourceGraphic" radius="3"/>
</filter>
<filter id="Erode6">
<feMorphology operator="erode" in="SourceGraphic" radius="6"/>
</filter>
<filter id="Dilate3">
<feMorphology operator="dilate" in="SourceGraphic" radius="3"/>
</filter>
<filter id="Dilate6">
<feMorphology operator="dilate" in="SourceGraphic" radius="6"/>
</filter>
</defs>
<rect fill="none" stroke="blue" stroke-width="3"
x="5" y="5" width="695" height="495"/>
<g enable-background="new" >
<g font-family="Verdana" font-size="75"
fill="none" stroke="black" stroke-width="6" >
<text x="50" y="90">
Unfiltered</text>
<text x="50" y="180"
filter="url(#Erode3)" >Erode radius 3</text>
<text x="50" y="270" filter="url(#Erode6)">Erode radius 6</text>
<text x="50" y="360" filter="url(#Dilate3)">Dilate radius 3</text>
<text x="50" y="450" filter="url(#Dilate6)">Dilate radius 6</text>
</g>
</g>
</svg>
|
 |
| Описание | ||
Значение erode делает текст тонким, значение dilate делает толстым. |
||
Фильтр feDisplacementMap позволяет изменять поверхность рисунка, используя в качестве основы другой рисунок. Таким образом, из растровой фотографии можно получить, к примеру, изображение развевающегося флага. Структура этого фильтра выглядит так (рис. 8.4):
(рис 8.4) Структура фильтра feDisplacementMapАтрибуты xChannelSelector и yChannelSelector определяют смещение в горизонтальном и вертикальном направлениях, причем это смещение можно задавать в отдельном канале RGB – модели. По умолчанию принимается канал прозрачности A. Атрибут scale определяет величину смещения ( в пикселях). В табл. 8.4 приводятся примеры использования фильтра.
| № | Код | Вид в браузере |
|---|---|---|
| 8.4.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="450"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap1.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="G" yChannelSelector="A"
in2="image2" in="image1"/>
</filter>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter)"/>
<!--Вставка исходных изображений-->
<image id="MyImage1" x="10" y="150"
width="186" height="125" xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="300"
width="186" height="125" xlink:href="stripe.png"/>
</svg>
|
 |
| Описание | ||
Исходные изображения содержат прозрачные области (см. рис. 7.8). Отдельные области верхнего изображения смещаются на величину scale="10", повторяя структуру нижнего изображения. Для горизонтального направления выделяется канал G, для вертикального A. |
||
| № | Код | Вид в браузере |
| 8.4.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="450"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap2.svg
</desc>
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="G" yChannelSelector="A"
in2="image2" in="image1"/>
</filter>
<filter id="myFilter2" filterUnits="userSpaceOnUse"
x="10" y="150" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="20"
xChannelSelector="G" yChannelSelector="A"
in2="image2" in="image1"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse"
x="10" y="300" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="30"
xChannelSelector="G" yChannelSelector="A"
in2="image2" in="image1"/>
</filter>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter1)"/>
<rect x="10" y="150" width="186" height="125"
filter="url(#myFilter2)"/>
<rect x="10" y="300" width="186" height="125"
filter="url(#myFilter3)"/>
</svg>
|
 |
| Описание | ||
| Смещение изображения на 10, 20 и 30 пикселей. | ||
| № | Код | Вид в браузере |
| 8.4.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="600"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap3.svg
</desc>
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="A" yChannelSelector="A"
in2="image2" in="image1"/>
</filter>
<filter id="myFilter2" filterUnits="userSpaceOnUse"
x="10" y="150" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="B" yChannelSelector="B"
in2="image2" in="image1"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse"
x="10" y="300" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="G" yChannelSelector="G"
in2="image2" in="image1"/>
</filter>
<filter id="myFilter4" filterUnits="userSpaceOnUse"
x="10" y="450" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="R" yChannelSelector="R"
in2="image2" in="image1"/>
</filter>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter1)"/>
<rect x="10" y="150" width="186" height="125"
filter="url(#myFilter2)"/>
<rect x="10" y="300" width="186" height="125"
filter="url(#myFilter3)"/>
<rect x="10" y="450" width="186" height="125"
filter="url(#myFilter4)"/>
</svg>
|
 |
| Описание | ||
Смещение изображения в сочетаниях каналов A-A, B-B, G-G, R-R. |
||
| № | Код | Вид в браузере |
| 8.4.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="600"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap4.svg
</desc>
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse"
x="10" y="10" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="A" yChannelSelector="B"
in2="image2" in="image1"/>
</filter>
<filter id="myFilter2" filterUnits="userSpaceOnUse"
x="10" y="150" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="B" yChannelSelector="A"
in2="image2" in="image1"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse"
x="10" y="300" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="A" yChannelSelector="G"
in2="image2" in="image1"/>
</filter>
<filter id="myFilter4" filterUnits="userSpaceOnUse"
x="10" y="450" width="186" height="125">
<feImage xlink:href="collage.png" result="image1"/>
<feImage xlink:href="stripe.png" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="A" yChannelSelector="R"
in2="image2" in="image1"/>
</filter>
</defs>
<rect x="10" y="10" width="186" height="125"
filter="url(#myFilter1)"/>
<rect x="10" y="150" width="186" height="125"
filter="url(#myFilter2)"/>
<rect x="10" y="300" width="186" height="125"
filter="url(#myFilter3)"/>
<rect x="10" y="450" width="186" height="125"
filter="url(#myFilter4)"/>
</svg>
|
 |
| Описание | ||
Смещение изображения в сочетаниях каналов A-B, B-A, A-G, A-R. |
||
| № | Код | Вид в браузере |
| 8.4.5 | <?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="290" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap5.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="0" y="0" width="279" height="187.5">
<feImage xlink:href="#MyImage1" result="image1"/>
<feImage xlink:href="#MyImage2" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="B" yChannelSelector="B"
in2="image2" in="image1"/>
</filter>
<image id="MyImage1" width="279" height="187.5"
xlink:href="sea1.jpg"/>
<g id="MyImage2">
<circle cx="145" cy="100" r="90"
stroke="none" fill="white"/>
<circle cx="145" cy="100" r="80"
stroke="none" fill="red"/>
<circle cx="145" cy="100" r="70"
stroke="none" fill="white"/>
<circle cx="145" cy="100" r="60"
stroke="none" fill="red"/>
<circle cx="145" cy="100" r="50"
stroke="none" fill="white"/>
<circle cx="145" cy="100" r="40"
stroke="none" fill="red"/>
<circle cx="145" cy="100" r="30"
stroke="none" fill="white"/>
<circle cx="145" cy="100" r="20"
stroke="none" fill="red"/>
<circle cx="145" cy="100" r="10"
stroke="none" fill="white"/>
</g>
</defs>
<rect x="10" y="10" width="279" height="187.5"
filter="url(#myFilter)"/>
</svg>
|
 |
| Описание | ||
| В качестве нижнего изображения применяется группа колец. Заметно отсечение и подъем фрагментов изображения в каждом кольце. | ||
| № | Код | Вид в браузере |
| 8.4.6 | <?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="290" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap6.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="0" y="0" width="279" height="187.5">
<feImage xlink:href="#MyImage1" result="image1"/>
<feImage xlink:href="#MyImage2" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="B" yChannelSelector="B"
in2="image2" in="image1"/>
</filter>
<image id="MyImage1" width="279" height="187.5" xlink:href="sea1.jpg"/>
<radialGradient id="MyGradient">
<stop offset="10%" stop-color="white"/>
<stop offset="20%" stop-color="red"/>
<stop offset="30%" stop-color="white"/>
<stop offset="40%" stop-color="red"/>
<stop offset="50%" stop-color="white"/>
<stop offset="60%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
<stop offset="80%" stop-color="red"/>
<stop offset="100%" stop-color="white"/>
</radialGradient>
<g id="MyImage2">
<circle cx="145" cy="100" r="90" fill="url(#MyGradient)"/>
</g>
</defs>
<rect x="10" y="10" width="279" height="187.5"
filter="url(#myFilter)"/>
</svg>
|
 |
| Описание | ||
| В качестве нижнего изображения применяется система колец с градиентной заливкой. Результат напоминает круги на воде. | ||
| № | Код | Вид в браузере |
| 8.4.7 | <?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="290" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap7.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="0" y="0" width="279" height="187.5">
<feImage xlink:href="#MyImage1" result="image1"/>
<feImage xlink:href="#MyImage2" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="B" yChannelSelector="B"
in2="image2" in="image1"/>
</filter>
<image id="MyImage1" width="279" height="187.5" xlink:href="sea1.jpg"/>
<linearGradient id="MyGradient">
<stop offset="0%" stop-color="white"/>
<stop offset="10%" stop-color="red"/>
<stop offset="20%" stop-color="white"/>
<stop offset="30%" stop-color="red"/>
<stop offset="40%" stop-color="white"/>
<stop offset="50%" stop-color="red"/>
<stop offset="60%" stop-color="white"/>
<stop offset="70%" stop-color="red"/>
<stop offset="80%" stop-color="white"/>
<stop offset="90%" stop-color="red"/>
<stop offset="100%" stop-color="white"/>
</linearGradient>
<g id="MyImage2">
<rect x="0" y="0" width="290" height="200" fill="url(#MyGradient)"/>
</g>
</defs>
<rect x="10" y="10" width="279" height="187.5"
filter="url(#myFilter)"/>
</svg>
|
 |
| Описание | ||
| В качестве нижнего изображения применяется система вертикальных полос с |
||
| № | Код | Вид в браузере |
| 8.4.8 | <?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="290" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap8.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="279" height="187.5">
<feImage xlink:href="#MyImage1" result="image1"/>
<feImage xlink:href="#MyImage2" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="A" yChannelSelector="A"
in2="image2" in="image1"/>
</filter>
<pattern id="MyPattern" x="10" y="10"
width="22" height="22"
patternUnits="userSpaceOnUse">
<circle cx="11" cy="11" r="10"
fill="red" stroke="black"/>
</pattern>
<rect id="MyImage2" x="10" y="10"
width="279" height="187.5"
fill="url(#MyPattern)"/>
<image id="MyImage1" width="279" height="187.5"
xlink:href="sea1.jpg"/>
</defs>
<rect x="10" y="10" width="279" height="187.5"
filter="url(#myFilter)"/>
</svg>
|
 |
| Описание | ||
| В качестве нижнего изображения применяется прмоугольник, залитый |
||
| № | Код | Вид в браузере |
| 8.4.9 | <?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="290" height="200"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feDisplacementMap9.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="10" y="10" width="279" height="187.5">
<feImage xlink:href="#MyImage1" result="image1"/>
<feImage xlink:href="#MyImage2" result="image2"/>
<feDisplacementMap scale="10"
xChannelSelector="A" yChannelSelector="A"
in2="image2" in="image1"/>
</filter>
<pattern id="MyPattern" x="10" y="10"
width="22" height="22"
patternUnits="userSpaceOnUse">
<rect x="11" y="11" width="10" height="10"
fill="red" stroke="black"/>
</pattern>
<rect id="MyImage2" x="10" y="10"
width="279" height="187.5" fill="url(#MyPattern)"/>
<image id="MyImage1" width="279" height="187.5"
xlink:href="sea1.jpg"/>
</defs>
<rect x="10" y="10" width="279" height="187.5"
filter="url(#myFilter)"/>
</svg>
|
 |
| Описание | ||
| В качестве нижнего изображения применяется прмоугольник, залитый |
||
В пятой Лекции мы проходили элемент pattern, задача которого заключалась в получении мозаики для оформления фигур. Другой способ получения мозаики заключается в применение фильтра feTile, структура которого имеет очень простой вид (рис. 8.5):
(рис 8.5) Структура фильтра feTitleФильтр принимает исходное изображение и размножает его в пределах области, определяемой атрибутами x, y, width и height. Для задания изображения или его части применяется фильтр feImage. В табл. 8.5 приводятся примеры использования этого фильтра.
| № | Код | Вид в браузере |
|---|---|---|
| 8.5.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="350"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feTile1.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="0" y="0" width="250" height="200">
<feImage x="5" y="40" width="40" height="45"
xlink:href="#MyImage" result="image"/>
<feTile x="0" y="0" width="250" height="200"
in="image"/>
</filter>
<image id="MyImage" width="186" height="125"
xlink:href="collage.png"/>
</defs>
<rect x="0" y="0" width="290" height="200"
filter="url(#myFilter)"/>
<!--Вспомогательные изображения-->
<image x="30" y="200" width="186" height="125"
xlink:href="collage.png"/>
<rect x="35" y="240" width="40" height="45"
style="fill:none;stroke:blue; stroke-width:2"/>
</svg>
|
 |
| Описание | ||
Исходное изображение "collage.png" вставлено в документ при помощи элемента image. Область мозаики (голова утенка) определяется внутри фильтра feImage:<feImage x="5" y="40"
width="40" height="45" xlink:href="#MyImage"
result="image"/>
Далее этот фрагмент копируется на области 250 х 200 пикселей:<feTile x="0" y="0"
width="250" height="200" in="image"/>
|
||
| № | Код | Вид в браузере |
| 8.5.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="350"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feTile2.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="0" y="0" width="250" height="200">
<feImage x="120" y="38" width="60" height="45"
xlink:href="#MyImage" result="image"/>
<feTile x="0" y="0" width="250" height="200"
in="image"/>
</filter>
<image id="MyImage" width="186" height="125"
xlink:href="collage.png"/>
</defs>
<rect x="0" y="0" width="290" height="200"
filter="url(#myFilter)"/>
<!--Вспомогательные изображения-->
<image x="30" y="200" width="186" height="125"
xlink:href="collage.png"/>
<rect x="150" y="238" width="60" height="45"
style="fill:none;stroke:blue; stroke-width:2"/>
</svg>
|
 |
| Описание | ||
| Определение другой части изображения для мозаики. | ||
| № | Код | Вид в браузере |
| 8.5.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="350"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feTile3.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="0" y="0" width="250" height="200">
<feImage x="0" y="0" width="62" height="41,67"
xlink:href="#MyImage" result="image"/>
<feTile x="0" y="0" width="250" height="200"
in="image"/>
</filter>
<image id="MyImage" width="62" height="41,67"
xlink:href="collage.png"/>
</defs>
<rect x="0" y="0" width="290" height="200"
filter="url(#myFilter)"/>
<!--Вспомогательные изображения-->
<image x="30" y="210" width="186" height="125"
xlink:href="collage.png"/>
<rect x="30" y="210" width="186" height="125"
style="fill:none;stroke:blue; stroke-width:2"/>
</svg>
|
 |
| Описание | ||
| Использование для мозаики целого изображения. | ||
| № | Код | Вид в браузере |
| 8.5.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="350"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feTile4.svg
</desc>
<defs>
<filter id="myFilter" filterUnits="userSpaceOnUse"
x="0" y="0" width="150" height="120">
<feImage x="0" y="0" width="62" height="41,67"
xlink:href="#MyImage" result="image"/>
<feTile x="0" y="0" width="250" height="200"
in="image"/>
</filter>
<image id="MyImage" width="62" height="41,67"
xlink:href="collage.png"/>
</defs>
<rect x="0" y="0" width="290" height="200"
filter="url(#myFilter)"/>
<!--Вспомогательные изображения-->
<image x="30" y="210" width="186" height="125"
xlink:href="collage.png"/>
<rect x="30" y="210" width="186" height="125"
style="fill:none;stroke:blue; stroke-width:2"/>
</svg>
|
 |
| Описание | ||
Область действия фильтра ограничивается размерами, задаваемыми в элементе filter:<filter id="myFilter" filterUnits="userSpaceOnUse"
x="0" y="0" width="150" height="120">
|
||
| № | Код | Вид в браузере |
| 8.5.5 | <?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="350"
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title> Лекция 8. Фильтры. Часть II </title>
<desc>
Пример feTile5.svg
</desc>
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse"
x="0" y="0" width="250" height="200">
<feImage x="5" y="40" width="40" height="45"
xlink:href="#MyImage" result="image"/>
<feTile x="0" y="0" width="125" height="200"
in="image"/>
</filter>
<filter id="myFilter2" filterUnits="userSpaceOnUse"
x="0" y="0" width="250" height="200">
<feImage x="120" y="38" width="60" height="45"
xlink:href="#MyImage" result="image"/>
<feTile x="125" y="0" width="125" height="200"
in="image"/>
</filter>
<image id="MyImage" width="186" height="125"
xlink:href="collage.png"/>
</defs>
<rect x="0" y="0" width="290" height="200"
filter="url(#myFilter1)"/>
<rect x="0" y="0" width="290" height="200"
filter="url(#myFilter2)"/>
<!--Вспомогательные изображения-->
<image x="30" y="200" width="186" height="125"
xlink:href="collage.png"/>
<rect x="35" y="240" width="40" height="45"
style="fill:none;stroke:blue; stroke-width:2"/>
<rect x="150" y="238" width="60" height="45"
style="fill:none;stroke:blue; stroke-width:2"/>
</svg>
|
 |
| Описание | ||
| Комбинация двух фильтров, для каждого из которых определена своя область действия. | ||
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.