Масштабируемая векторная графика (Scalable Vector Graphics)

Фильтры. Часть IV

Разбить на страницы
Показывать лекцию целиком
Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

feDiffuseLighting. feDistantLight

Фильтр feDiffuseLighting предназначен для добавления рассеянного света к изображениям. Наиболее употребительное его применение - добавление освещенности к текстурам, которые в свою очередь создаются фильтром feTurbulence. Структура фильтра выглядит следующим образом (рис. 10.1):

(рис 10.1) Структура фильтра feDiffuseLighting

Этот фильтр обязательно должен содержать внутри себя один из вспомогательных (дочерних) фильтров: feDistantLight, fePointLight или feSpotLight. Отсутствие хотя бы одного из этих фильтров приводит к синтаксической ошибке SVG - документа. Структура фильтра feDistantLight выглядит следующим образом:

(рис 10.2) Структура фильтра feDistantLight

Фильтр feDistantLight может использоваться только в составе feDiffuseLighting или feSpecularLighting. Такое разнообразие сочетаний и невозможность выделения отдельного фильтра может поначалу сбивать с толку. Самое главное здесь - разобраться в свойствах отдельных сочетаний. Рассмотрим комбинацию feDiffuseLighting и feDistantLight. Описание атрибутов родительского фильтра feDiffuseLighting приводится в табл. 10.1

Атрибуты фильтра feDiffuseLighting
№ Название
10.1.1 lighting-color
Описание
Цвет рассеянного света
Диапазон значений
<color> (См. табл. 2.8)
Значение по умолчанию
white (белый цвет)
№ Название
10.1.2 diffuseConstant
Описание
Постоянная размытия. Отвечает за оттенок цвета, используемого в атрибуте lighting-color.
Диапазон значений
<number>
Значение по умолчанию
1
№ Название
10.1.3 surfaceScale
Описание
Атрибут, отвечающий за масштабирование области рассеянного света. Визуально отвечает за резкость выражения текстуры.
Диапазон значений
<number>
Значение по умолчанию
1
№ Название
10.1.4 kernelUnitLength
Описание
Размерность внутренней структуры фильтра.
Диапазон значений
<number>, <number>
Значение по умолчанию
1

Фильтр feDistantLight содержит всего два атрибута, описание которых приводится в табл. 10.2:

Атрибуты фильтра feDistantLight.
№ Название
10.2.1 azimuth
Описание
Расположение источника света (азимут) в плоскости рисунка ( XY ), выражаемое в градусах.
Диапазон значений
<number>
Значение по умолчанию
0
№ Название
10.2.1 elevation
Описание
Расположение источника света в плоскости ( YZ ), перпендикулярной плоскости рисунка, выражаемое в градусах.
Диапазон значений
<number>
Значение по умолчанию
0

Примеры использования фильтров feDiffuseLighting и feDistantLight, в сочетании с фильтром feTurbulence, приводятся в табл. 10.3

Фильтры feDiffuseLighting и feDistantLight.
№ Код Вид в браузере
10.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="200" height="400" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feDiffuseLighting_feDistantLight1.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>


<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="0" y="200" width="200" height="200">
<feTurbulence type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
</filter>


</defs>
<rect x="0" y="0" width="200" height="200" 
      filter="url(#myFilter1)" />
<rect x="0" y="200" width="200" height="200" 
      filter="url(#myFilter2)" />
</svg>
Описание
Довольно невыразительное заполнение фильтра feTurbulence превращается в четко-выраженную текстуру.
№ Код Описание
10.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feDiffuseLighting_feDistantLight2.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="red" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="green" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="orange" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="yellow" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="magenta" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      lighting-color="red"</text>

     
<text x="160" y="15" style="fill: white; font-size: 12px">
      lighting-color="green" </text>

     
<text x="304" y="15" style="fill: white; font-size: 12px">
      lighting-color="blue" </text>

     
<text x="5" y="165" style="fill: white; font-size: 12px">
      lighting-color="orange"</text>    

     
<text x="160" y="165" style="fill: black; font-size: 12px">
      lighting-color="yellow" </text>

     
<text x="310" y="165" style="fill: white; font-size: 12px">
      lighting-color="magenta" </text>

     
</svg>
 Атрибут lighting-color позволяет получать текстуру различных цветов.
Вид в браузере
№ Код Описание
10.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feDiffuseLighting_feDistantLight3.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0.8" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0.6" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0.4" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0.2" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      diffuseConstant="1"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      diffuseConstant="0.8"</text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      diffuseConstant="0.6" </text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      diffuseConstant="0.4"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      diffuseConstant="0.2" </text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      diffuseConstant="0" </text>
</svg>
 Изменение оттенка цвета при помощи атрибута diffuseConstant
Вид в браузере
№ Код Описание
10.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feDiffuseLighting_feDistantLight4.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="8">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="12">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="16">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="20">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="24">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      surfaceScale="3.7"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      surfaceScale="8"</text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      surfaceScale="12"</text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      surfaceScale="16"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      surfaceScale="20"</text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      surfaceScale="24" </text>
</svg>
 Увеличение значений атрибута surfaceScale делает текстуру более резкой и выраженной.
Вид в браузере

feSpecularLighting. fePointLight

Фильтр feSpecularLighting предназначен для добавления источника к изображению. Подобно фильтру feDiffuseLighting, он должен обязательно содержать один из трех дочерних фильтров (рис. 10.3):

(рис 10.3) Структура фильтра feSpecularLighting

Мы рассмотрим сочетание feSpecularLighting и fePointLight. Структура фильтра fePointLight выглядит следующим образом (рис. 10.4):

(рис 10.4) Структура фильтра fePointLight

Значения одноименных атрибутов фильтров feSpecularLighting и feDiffuseLighting совпадают. Описание собственных атрибутов фильтра feSpecularLighting приводится в табл. 10.4

Атрибуты фильтра feSpecularLighting.
№ Название
10.4.1 specularConstant
Описание
Величина изображения источника, включая область рассеянного света.
Диапазон значений
<number>
Значение по умолчанию
1
№ Название
10.4.2 specularExponent
Описание
Величина изображения источника.
Диапазон значений
1 - 128 ( <number> )
Значение по умолчанию
1

Атрибуты x, y фильтра fePointLight определяют расположение источника света в горизонтальной плоскости (в плоскости XY ). Атрибут z определяет расположение источника относительно направления, перпендикулярного плоскости рисунка (в плоскости YZ ). Рассмотрим вначале примеры с различными значениями этих атрибутов (табл. 10.5).

Фильтр fePointLight.
№ Код Вид в браузере
10.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="200" height="200" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример fePointLight1.svg
     </desc>
     
<defs>

    <filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="100" z="10"/>
      </feSpecularLighting>
    </filter>


</defs>

  <rect x="0" y="0" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="0" width="200" height="200" 
      style="filter: url(#myFilter)"/>
</svg>
Описание
В качестве объекта, на фоне которого располагается источник света, выбран элемент прямоугольник, имитирующий небо. Атрибуты x="100" y="100" фильтра fePointLight задают расположение источника в центре документа.
№ Код Вид в браузере
10.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="200" height="600" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример fePointLight2.svg
     </desc>
     
<defs>

    <filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="100" z="10"/>
      </feSpecularLighting>
    </filter>

    <filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="0" y="200" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="300" z="20"/>
      </feSpecularLighting>
    </filter>

    <filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="0" y="400" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="500" z="30"/>
      </feSpecularLighting>
    </filter>
</defs>

  <rect x="0" y="0" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="0" width="200" height="200" 
      style="filter: url(#myFilter1)"/>
  
    <rect x="0" y="200" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="200" width="200" height="200" 
      style="filter: url(#myFilter2)"/>
  
    <rect x="0" y="400" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="400" width="200" height="200" 
      style="filter: url(#myFilter3)"/>
</svg>
Описание
Различные значения атрибуты z фильтра fePointLight отображают источник света с различной глубиной по отношению к рисунку. Ближайшей позиции соответствует наибольший размер.
№ Код Вид в браузере
10.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="200" height="600" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример fePointLight3.svg
     </desc>
     
<defs>

    <filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="50" y="50" z="10"/>
      </feSpecularLighting>
    </filter>

    <filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="0" y="200" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="300" z="10"/>
      </feSpecularLighting>
    </filter>

    <filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="0" y="400" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="150" y="550" z="10"/>
      </feSpecularLighting>
    </filter>
</defs>

  <rect x="0" y="0" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="0" width="200" height="200" 
      style="filter: url(#myFilter1)"/>
  
  <rect x="0" y="200" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="200" width="200" height="200" 
      style="filter: url(#myFilter2)"/>
  
  <rect x="0" y="400" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="400" width="200" height="200" 
      style="filter: url(#myFilter3)"/>
</svg>
Описание
Смещение источника при помощи атрибутов x и y.

Итак, применять фильтр fePointLight достаточно просто. Теперь мы можем сосредоточить свое внимание на применении фильтра feSpecularLighting (табл. 10.6):

Фильтр feSpecularLighting.
№ Код Описание
10.6.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpecularLighting1.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="1" 
        specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="75" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                      specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="225" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="5" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="375" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="7" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="75" y="225" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="9" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="225" y="225" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="10" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="375" y="225" z="10"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      surfaceScale="1"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      surfaceScale="3" </text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      surfaceScale="5" </text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      surfaceScale="7"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      surfaceScale="9" </text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      surfaceScale="10"</text>

</svg>
 Атрибут surfaceScale отвечает за масшабирование, как единого целого, источника света.
Вид в браузере
№ Код Описание
10.6.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpecularLighting2.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="1"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="75" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="3"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="225" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="5"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="375" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="7"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="75" y="225" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="9"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="225" y="225" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="11"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="375" y="225" z="10"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      surfaceScale="1"</text>

     
<text x="160" y="15" style="fill: white; font-size: 12px">
      surfaceScale="3" </text>

     
<text x="304" y="15" style="fill: white; font-size: 12px">
      surfaceScale="5" </text>

     
<text x="5" y="165" style="fill: white; font-size: 12px">
      surfaceScale="7"</text>    

     
<text x="160" y="165" style="fill: white; font-size: 12px">
      surfaceScale="9" </text>

     
<text x="310" y="165" style="fill: white; font-size: 12px">
      surfaceScale="10"</text>

     
</svg>
 Атрибут specularConstant позволяет изменять величину источника вместе с областью рассеянного света.
Вид в браузере
№ Код Описание
10.6.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpecularLighting3.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="20" lighting-color="yellow">
        <fePointLight x="75" y="75" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="40" lighting-color="yellow">
        <fePointLight x="225" y="75" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="60" lighting-color="yellow">
        <fePointLight x="375" y="75" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="80" lighting-color="yellow">
        <fePointLight x="75" y="225" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="100" lighting-color="yellow">
        <fePointLight x="225" y="225" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="128" lighting-color="yellow">
        <fePointLight x="375" y="225" z="50"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      specularExponent="20"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      specularExponent="40"</text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      specularExponent="60"</text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      specularExponent="80"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      specularExponent="100"</text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      specularExponent="128"</text>

</svg>
 Атрибут specularExponent позволяет изменять величину источника
Вид в браузере

feSpotLight

Рассмотренные выше примеры позволяют моделировать источник света сферической формы, т. е. солнце. Для создания освещения под углом, напоминающего летящую комету, применяется фильтр feSpotLight (рис. 10.5):

(рис 10.5) Структура фильтра feSpotLight

Это тоже дочерний фильтр, который можно применять лишь в сочетании. Мы рассмотрим его применение в составе фильтра feSpecularLighting. Значения одноименных атрибутов фильтров feSpotLight и fePointLight совпадают. Описание собственных атрибутов фильтра feSpotLight приводится в табл. 10.7:

Атрибуты фильтра feSpotLight.
№ Название
10.7.1 pointsAtX, pointsAtY, pointsAtZ
Описание
Центровка середины источника и его области рассеянного света. Именно этот набор атрибутов позволяет изменять вид источника с получением кометного эффекта.
Диапазон значений
<number>
Значение по умолчанию
0
№ Название
10.7.2 limitingConeAngle
Описание
Величина угла конуса, ограничивающего распространение света.
Диапазон значений
<number>
Значение по умолчанию
-

В табл. 10.8 приводятся примеры использования фильтра feSpotLight.

Фильтр feSpotLight.
№ Код Вид в браузере
10.8.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="200" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpotLight1.svg
     </desc>
     
<defs>

    <filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="100" y="100" z="30" 
             pointsAtX="100" pointsAtY="100" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
    </filter>


</defs>

  <rect x="0" y="0" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="0" width="200" height="200" 
      style="filter: url(#myFilter)"/>
</svg>
Описание
Этот пример очень похож на применение фильтра fePointLight (см. fePointLight1.svg), поскольку значения атрибутов координат попарно совпадают: x="100" y="100" pointsAtX="100" pointsAtY="100"
№ Код Описание
10.8.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpotLight2.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="75" y="75" z="30" 
             pointsAtX="25" pointsAtY="25" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
 <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="225" y="75" z="30" 
             pointsAtX="275" pointsAtY="125" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
 <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="375" y="75" z="30" 
             pointsAtX="425" pointsAtY="25" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="75" y="225" z="30" 
             pointsAtX="25" pointsAtY="275" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="225" y="225" z="30" 
             pointsAtX="200" pointsAtY="225" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="375" y="225" z="30" 
             pointsAtX="375" pointsAtY="200" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size:12px">
      pointsAtX="25" (75) </text>
<text x="10" y="27" style="fill: white; font-size:12px">
       pointsAtY="25" (75)</text>
     
<text x="160" y="15" style="fill: white; font-size: 12px">
      pointsAtX="275" (225)  </text>
<text x="160" y="27" style="fill: white; font-size: 12px">
      pointsAtY="125" (75)  </text>
     
<text x="304" y="15" style="fill: white; font-size: 12px">
      pointsAtX="425" (375) </text>
<text x="304" y="27" style="fill: white; font-size: 12px">
       pointsAtY="25" (75)</text>
     
<text x="5" y="165" style="fill: white; font-size: 12px">
      pointsAtX="25" (75) </text>    
<text x="5" y="177" style="fill: white; font-size: 12px">
      pointsAtY="275" (225)</text>  
     
<text x="160" y="165" style="fill: white; font-size: 12px">
      pointsAtX="200" (225) </text>
<text x="160" y="177" style="fill: white; font-size: 12px">
       pointsAtY="225" (225) </text>

     
<text x="310" y="165" style="fill: white; font-size: 12px">
      pointsAtX="375" (375) </text>
<text x="310" y="177" style="fill: white; font-size: 12px">
      pointsAtY="200" (225)</text>

     
</svg>
 Изменение расположения"хвоста" кометы при задании атрибутов pointsAtX и pointsAtY. В скобках для каждого атрибута указано соответствующее значение координаты.
Вид в браузере
№ Код Описание
10.8.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpotLight3.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="25" y="25" z="50" 
             pointsAtX="125" pointsAtY="125" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
 <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="175" y="25" z="50" 
             pointsAtX="275" pointsAtY="125" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="45"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
 <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="325" y="25" z="50" 
             pointsAtX="425" pointsAtY="125" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="30"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="25" y="175" z="50" 
             pointsAtX="125" pointsAtY="275" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="15"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="175" y="175" z="50" 
             pointsAtX="275" pointsAtY="275" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="325" y="175" z="50" 
             pointsAtX="425" pointsAtY="275" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="5"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size:12px">
      limitingConeAngle="90"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      limitingConeAngle="45"  </text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      limitingConeAngle="30" </text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      limitingConeAngle="15"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      limitingConeAngle="10"</text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      limitingConeAngle="5" </text>

</svg>
 Ограничение области распространения света при помощи атрибута limitingConeAngle.
Вид в браузере

Во всех рассмотренных примерах расположения источника света в качестве подложки использовался синий прямоугольник. Попробуйте самостоятельно заменить его растровым изображением, а также включить его в состав фильтра.

feConvolveMatrix

Фильтр feConvolveMatrix позволяет размывать изображение в горизонтальном или вертикальном направлениях. Его структура имеет следующий вид (рис. 10.6):

(рис 10.6) Структура фильтра feConvolveMatrix

Некоторые атрибуты этого фильтра представляют собой весьма тонкие настройки, которые не могут быть наглядно отображены в чистом виде, без взаимодействия с другими фильтрами. В табл. 10.9 приводится описание некоторых атрибутов этого фильтраПолное описание атрибутов и формулы преобразования смотрите в спецификации: http://www.w3.org/TR/2003/REC-SVG11-20030114/filters.html .

Атрибуты фильтра feConvolveMatrix.
№ Название
10.9.1 order
Описание
Значение атрибута, представляет собой пару чисел, задающую направление размытия. Одно из чисел должно быть равным количеству значений, определяемых в атрибуте kernel Matrix. Например, атрибут определяется так: kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1" Общее число значений равно 15. Значит, атрибут может быть определен как order="15,1" или order ="1,15". В первом случае размытие будет по горизонтали, во втором - по вертикали.
Диапазон значений
<number>, <number>
Значение по умолчанию
3
№ Название
10.9.2 kernelMatrix
Описание
Степень размытия, задается в виде набора значений. Чем больше количество значений, тем больше степень размытия.
Диапазон значений
Набор <number>
Значение по умолчанию
-
№ Название
10.9.3 divisor
Описание
Управление яркостью изображения. При значении, равном количеству чисел атрибута kernelMatrix яркость остается неизменной. При меньших значениях яркость увеличивается. При больших - наоборот, уменьшается.
Диапазон значений
Сумма значений <number>
Значение по умолчанию
-
№ Название
10.9.4 edgeMode
Описание
Порядок преобразования пикселей изображения.
Диапазон значений
duplicate | wrap | none
Значение по умолчанию
duplicate
№ Название
10.9.5 preserveAlpha
Описание
При значении false этого атрибута преобразование будет применяться ко всем каналам, включая прозрачность A. При значении true преобразование будет происходить в каналах RGB с сохранением исходной прозрачности..
Диапазон значений
false | true
Значение по умолчанию
false

Несмотря на сложность атрибутов этого фильтра, получать простое размытие изображения достаточно легко. В табл. 10.10 приводятся такие примеры.

Фильтр feConvolveMatrix.
№ Код Вид в браузере
10.10.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="350" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix1.svg
     </desc>
     
<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="175" width="186" height="125">    
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="15,1" 
        kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>



</defs>
<image xlink:href="sea2.jpg" x="10" y="175" 
       width="186" height="125"
       style="filter: url(#myFilter)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea2.jpg"/>

</svg>
Описание
Горизонтальное размытие. Количество значений атрибута kernelMatrix равно 15.
№ Код Описание
10.10.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix2.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="15,1" 
        kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
       preserveAlpha="true" order="1,15" 
       kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="12,1" 
        kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
       preserveAlpha="true" order="6,1" 
       kernelMatrix="0 1 2 3 4 5"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
      preserveAlpha="true" order="1,6" 
      kernelMatrix="0 1 2 3 4 5"/>
</filter>


</defs>

<image xlink:href="sea2.jpg" x="215" y="10" 
    width="186" height="125"
    style="filter: url(#myFilter1)"/>
<image xlink:href="sea2.jpg" x="10" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter2)"/>
<image xlink:href="sea2.jpg" x="215" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter3)"/>
<image xlink:href="sea2.jpg" x="10" y="300" 
    width="186" height="125"
    style="filter: url(#myFilter4)"/>
<image xlink:href="sea2.jpg" x="215" y="300" 
    width="186" height="125"
    style="filter: url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea2.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
      sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
      order="15,1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
      order="1,15"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       order="12,1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
      order="6,1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
      order="1,6"</text>

</svg>
 Примеры горизонтального и вертикального размытия различной степени. При значении атрибута order="12,1", которое не содержит числа, равного количеству значений атрибута kernelMatrix, фильтр не изменяет изображение.
Вид в браузере
№ Код Описание
10.10.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>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix3.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="9,1" 
        kernelMatrix=" 4 5 6 4 5 6 4 5 6"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" preserveAlpha="true"
        order="1,9" kernelMatrix=" 4 5 6 4 5 6 4 5 6"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="60, 1" 
                                kernelMatrix="0 1 2 3 4 5 6 7 8 9 
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9 "/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="1, 60" 
                                kernelMatrix="0 1 2 3 4 5 6 7 8 9 
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9 "/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="60, 1" 
                                kernelMatrix="1 1 1 1 1 1 1 1 1 1   
                                    1 1 1 1 1 1 1 1 1 1
                                    1 1 1 1 1 1 1 1 1 1
                                    1 1 1 1 1 1 1 1 1 1
                                    1 1 1 1 1 1 1 1 1 1
                                    1 1 1 1 1 1 1 1 1 1  "/>
</filter>

</defs>

<image xlink:href="sea2.jpg" x="215" y="10" 
    width="186" height="125"
    style="filter: url(#myFilter1)"/>
<image xlink:href="sea2.jpg" x="10" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter2)"/>
<image xlink:href="sea2.jpg" x="215" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter3)"/>
<image xlink:href="sea2.jpg" x="10" y="300" 
    width="186" height="125"
    style="filter: url(#myFilter4)"/>
<image xlink:href="sea2.jpg" x="215" y="300" 
    width="186" height="125"
    style="filter: url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea2.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
      sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       order="9,1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
      order="1,9"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
      order="60, 1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
      order="1, 60"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
      order="60, 1"</text>

</svg>
 Применение размытия высокой степени.
Вид в браузере
№ Код Описание
10.10.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>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix4.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" divisor="8"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="false" divisor="7"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" divisor="6"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" divisor="5"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
         preserveAlpha="true" divisor="4"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


</defs>

<image xlink:href="sea2.jpg" x="215" y="10" 
    width="186" height="125"
    style="filter: url(#myFilter1)"/>
<image xlink:href="sea2.jpg" x="10" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter2)"/>
<image xlink:href="sea2.jpg" x="215" y="155"
    width="186" height="125"
    style="filter: url(#myFilter3)"/>
<image xlink:href="sea2.jpg" x="10" y="300"
    width="186" height="125"
    style="filter: url(#myFilter4)"/>
<image xlink:href="sea2.jpg" x="215" y="300"
    width="186" height="125"
    style="filter: url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea2.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
      sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
      divisor="8"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
      divisor="7"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       divisor="6"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
      divisor="5"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
      divisor="4"</text>

</svg>
 Сумма значений атрибута kernelMatrix равна 8: 1+0+1+0+1+0+1+0+1+0+1+0+1+0+1=8. Примеры увеличения яркости при значениях атрибута divisor меньших 8.
Вид в браузере
№ Код Описание
10.10.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>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix5.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" divisor="8"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap"
        preserveAlpha="false" divisor="9"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap"
        preserveAlpha="true" divisor="10"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap"
        preserveAlpha="true" divisor="11"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap"
        preserveAlpha="true" divisor="12"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


</defs>

<image xlink:href="sea2.jpg" x="215" y="10"
    width="186" height="125"
    style="filter: url(#myFilter1)"/>
<image xlink:href="sea2.jpg" x="10" y="155"
    width="186" height="125"
    style="filter: url(#myFilter2)"/>
<image xlink:href="sea2.jpg" x="215" y="155"
    width="186" height="125"
    style="filter: url(#myFilter3)"/>
<image xlink:href="sea2.jpg" x="10" y="300"
    width="186" height="125"
    style="filter: url(#myFilter4)"/>
<image xlink:href="sea2.jpg" x="215" y="300"
    width="186" height="125"
    style="filter: url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125"
    xlink:href="sea2.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
      sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
      divisor="8"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
      divisor="9"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       divisor="10"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
      divisor="11"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
      divisor="12"</text>

</svg>
 Примеры уменьшения яркости при значениях атрибута divisor больших 8.
Вид в браузере

Мы рассмотрели все 19 фильтров SVG - графики. Теперь вы можете их использовать в различных сочетаниях для получения самых разнообразных художественных эффектов.

Страницы:
Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

feDiffuseLighting. feDistantLight

Фильтр feDiffuseLighting предназначен для добавления рассеянного света к изображениям. Наиболее употребительное его применение - добавление освещенности к текстурам, которые в свою очередь создаются фильтром feTurbulence. Структура фильтра выглядит следующим образом (рис. 10.1):

(рис 10.1) Структура фильтра feDiffuseLighting

Этот фильтр обязательно должен содержать внутри себя один из вспомогательных (дочерних) фильтров: feDistantLight, fePointLight или feSpotLight. Отсутствие хотя бы одного из этих фильтров приводит к синтаксической ошибке SVG - документа. Структура фильтра feDistantLight выглядит следующим образом:

(рис 10.2) Структура фильтра feDistantLight

Фильтр feDistantLight может использоваться только в составе feDiffuseLighting или feSpecularLighting. Такое разнообразие сочетаний и невозможность выделения отдельного фильтра может поначалу сбивать с толку. Самое главное здесь - разобраться в свойствах отдельных сочетаний. Рассмотрим комбинацию feDiffuseLighting и feDistantLight. Описание атрибутов родительского фильтра feDiffuseLighting приводится в табл. 10.1

Атрибуты фильтра feDiffuseLighting
№ Название
10.1.1 lighting-color
Описание
Цвет рассеянного света
Диапазон значений
<color> (См. табл. 2.8)
Значение по умолчанию
white (белый цвет)
№ Название
10.1.2 diffuseConstant
Описание
Постоянная размытия. Отвечает за оттенок цвета, используемого в атрибуте lighting-color.
Диапазон значений
<number>
Значение по умолчанию
1
№ Название
10.1.3 surfaceScale
Описание
Атрибут, отвечающий за масштабирование области рассеянного света. Визуально отвечает за резкость выражения текстуры.
Диапазон значений
<number>
Значение по умолчанию
1
№ Название
10.1.4 kernelUnitLength
Описание
Размерность внутренней структуры фильтра.
Диапазон значений
<number>, <number>
Значение по умолчанию
1

Фильтр feDistantLight содержит всего два атрибута, описание которых приводится в табл. 10.2:

Атрибуты фильтра feDistantLight.
№ Название
10.2.1 azimuth
Описание
Расположение источника света (азимут) в плоскости рисунка ( XY ), выражаемое в градусах.
Диапазон значений
<number>
Значение по умолчанию
0
№ Название
10.2.1 elevation
Описание
Расположение источника света в плоскости ( YZ ), перпендикулярной плоскости рисунка, выражаемое в градусах.
Диапазон значений
<number>
Значение по умолчанию
0

Примеры использования фильтров feDiffuseLighting и feDistantLight, в сочетании с фильтром feTurbulence, приводятся в табл. 10.3

Фильтры feDiffuseLighting и feDistantLight.
№ Код Вид в браузере
10.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="200" height="400" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feDiffuseLighting_feDistantLight1.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>


<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="0" y="200" width="200" height="200">
<feTurbulence type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
</filter>


</defs>
<rect x="0" y="0" width="200" height="200" 
      filter="url(#myFilter1)" />
<rect x="0" y="200" width="200" height="200" 
      filter="url(#myFilter2)" />
</svg>
Описание
Довольно невыразительное заполнение фильтра feTurbulence превращается в четко-выраженную текстуру.
№ Код Описание
10.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feDiffuseLighting_feDistantLight2.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="red" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="green" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="orange" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="yellow" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="magenta" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      lighting-color="red"</text>

     
<text x="160" y="15" style="fill: white; font-size: 12px">
      lighting-color="green" </text>

     
<text x="304" y="15" style="fill: white; font-size: 12px">
      lighting-color="blue" </text>

     
<text x="5" y="165" style="fill: white; font-size: 12px">
      lighting-color="orange"</text>    

     
<text x="160" y="165" style="fill: black; font-size: 12px">
      lighting-color="yellow" </text>

     
<text x="310" y="165" style="fill: white; font-size: 12px">
      lighting-color="magenta" </text>

     
</svg>
 Атрибут lighting-color позволяет получать текстуру различных цветов.
Вид в браузере
№ Код Описание
10.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feDiffuseLighting_feDistantLight3.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0.8" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0.6" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0.4" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0.2" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="0" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      diffuseConstant="1"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      diffuseConstant="0.8"</text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      diffuseConstant="0.6" </text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      diffuseConstant="0.4"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      diffuseConstant="0.2" </text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      diffuseConstant="0" </text>
</svg>
 Изменение оттенка цвета при помощи атрибута diffuseConstant
Вид в браузере
№ Код Описание
10.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feDiffuseLighting_feDistantLight4.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="3.7">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="8">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="12">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="16">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="20">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence result="pict1" type="turbulence" 
               baseFrequency="0.1" numOctaves="4" seed="0"/>
<feDiffuseLighting result="pict2" in="pict1" lighting-color="blue" 
                   diffuseConstant="1" kernelUnitLength="1,1" 
                   surfaceScale="24">
<feDistantLight azimuth="45" elevation="45"/>
</feDiffuseLighting>
<feComposite in2="pict2" in="pict1" operator="xor" 
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      surfaceScale="3.7"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      surfaceScale="8"</text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      surfaceScale="12"</text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      surfaceScale="16"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      surfaceScale="20"</text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      surfaceScale="24" </text>
</svg>
 Увеличение значений атрибута surfaceScale делает текстуру более резкой и выраженной.
Вид в браузере

feSpecularLighting. fePointLight

Фильтр feSpecularLighting предназначен для добавления источника к изображению. Подобно фильтру feDiffuseLighting, он должен обязательно содержать один из трех дочерних фильтров (рис. 10.3):

(рис 10.3) Структура фильтра feSpecularLighting

Мы рассмотрим сочетание feSpecularLighting и fePointLight. Структура фильтра fePointLight выглядит следующим образом (рис. 10.4):

(рис 10.4) Структура фильтра fePointLight

Значения одноименных атрибутов фильтров feSpecularLighting и feDiffuseLighting совпадают. Описание собственных атрибутов фильтра feSpecularLighting приводится в табл. 10.4

Атрибуты фильтра feSpecularLighting.
№ Название
10.4.1 specularConstant
Описание
Величина изображения источника, включая область рассеянного света.
Диапазон значений
<number>
Значение по умолчанию
1
№ Название
10.4.2 specularExponent
Описание
Величина изображения источника.
Диапазон значений
1 - 128 ( <number> )
Значение по умолчанию
1

Атрибуты x, y фильтра fePointLight определяют расположение источника света в горизонтальной плоскости (в плоскости XY ). Атрибут z определяет расположение источника относительно направления, перпендикулярного плоскости рисунка (в плоскости YZ ). Рассмотрим вначале примеры с различными значениями этих атрибутов (табл. 10.5).

Фильтр fePointLight.
№ Код Вид в браузере
10.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="200" height="200" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример fePointLight1.svg
     </desc>
     
<defs>

    <filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="100" z="10"/>
      </feSpecularLighting>
    </filter>


</defs>

  <rect x="0" y="0" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="0" width="200" height="200" 
      style="filter: url(#myFilter)"/>
</svg>
Описание
В качестве объекта, на фоне которого располагается источник света, выбран элемент прямоугольник, имитирующий небо. Атрибуты x="100" y="100" фильтра fePointLight задают расположение источника в центре документа.
№ Код Вид в браузере
10.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="200" height="600" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример fePointLight2.svg
     </desc>
     
<defs>

    <filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="100" z="10"/>
      </feSpecularLighting>
    </filter>

    <filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="0" y="200" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="300" z="20"/>
      </feSpecularLighting>
    </filter>

    <filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="0" y="400" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="500" z="30"/>
      </feSpecularLighting>
    </filter>
</defs>

  <rect x="0" y="0" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="0" width="200" height="200" 
      style="filter: url(#myFilter1)"/>
  
    <rect x="0" y="200" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="200" width="200" height="200" 
      style="filter: url(#myFilter2)"/>
  
    <rect x="0" y="400" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="400" width="200" height="200" 
      style="filter: url(#myFilter3)"/>
</svg>
Описание
Различные значения атрибуты z фильтра fePointLight отображают источник света с различной глубиной по отношению к рисунку. Ближайшей позиции соответствует наибольший размер.
№ Код Вид в браузере
10.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="200" height="600" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример fePointLight3.svg
     </desc>
     
<defs>

    <filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="50" y="50" z="10"/>
      </feSpecularLighting>
    </filter>

    <filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="0" y="200" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="100" y="300" z="10"/>
      </feSpecularLighting>
    </filter>

    <filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="0" y="400" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="150" y="550" z="10"/>
      </feSpecularLighting>
    </filter>
</defs>

  <rect x="0" y="0" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="0" width="200" height="200" 
      style="filter: url(#myFilter1)"/>
  
  <rect x="0" y="200" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="200" width="200" height="200" 
      style="filter: url(#myFilter2)"/>
  
  <rect x="0" y="400" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="400" width="200" height="200" 
      style="filter: url(#myFilter3)"/>
</svg>
Описание
Смещение источника при помощи атрибутов x и y.

Итак, применять фильтр fePointLight достаточно просто. Теперь мы можем сосредоточить свое внимание на применении фильтра feSpecularLighting (табл. 10.6):

Фильтр feSpecularLighting.
№ Код Описание
10.6.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpecularLighting1.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="1" 
        specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="75" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                      specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="225" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="5" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="375" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="7" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="75" y="225" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="9" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="225" y="225" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="10" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="375" y="225" z="10"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      surfaceScale="1"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      surfaceScale="3" </text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      surfaceScale="5" </text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      surfaceScale="7"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      surfaceScale="9" </text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      surfaceScale="10"</text>

</svg>
 Атрибут surfaceScale отвечает за масшабирование, как единого целого, источника света.
Вид в браузере
№ Код Описание
10.6.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpecularLighting2.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="1"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="75" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="3"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="225" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="5"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="375" y="75" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="7"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="75" y="225" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="9"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="225" y="225" z="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="11"
        specularExponent="10" lighting-color="yellow">
        <fePointLight x="375" y="225" z="10"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      surfaceScale="1"</text>

     
<text x="160" y="15" style="fill: white; font-size: 12px">
      surfaceScale="3" </text>

     
<text x="304" y="15" style="fill: white; font-size: 12px">
      surfaceScale="5" </text>

     
<text x="5" y="165" style="fill: white; font-size: 12px">
      surfaceScale="7"</text>    

     
<text x="160" y="165" style="fill: white; font-size: 12px">
      surfaceScale="9" </text>

     
<text x="310" y="165" style="fill: white; font-size: 12px">
      surfaceScale="10"</text>

     
</svg>
 Атрибут specularConstant позволяет изменять величину источника вместе с областью рассеянного света.
Вид в браузере
№ Код Описание
10.6.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpecularLighting3.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="20" lighting-color="yellow">
        <fePointLight x="75" y="75" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="40" lighting-color="yellow">
        <fePointLight x="225" y="75" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="60" lighting-color="yellow">
        <fePointLight x="375" y="75" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="80" lighting-color="yellow">
        <fePointLight x="75" y="225" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="100" lighting-color="yellow">
        <fePointLight x="225" y="225" z="50"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="128" lighting-color="yellow">
        <fePointLight x="375" y="225" z="50"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size: 12px">
      specularExponent="20"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      specularExponent="40"</text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      specularExponent="60"</text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      specularExponent="80"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      specularExponent="100"</text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      specularExponent="128"</text>

</svg>
 Атрибут specularExponent позволяет изменять величину источника
Вид в браузере

feSpotLight

Рассмотренные выше примеры позволяют моделировать источник света сферической формы, т. е. солнце. Для создания освещения под углом, напоминающего летящую комету, применяется фильтр feSpotLight (рис. 10.5):

(рис 10.5) Структура фильтра feSpotLight

Это тоже дочерний фильтр, который можно применять лишь в сочетании. Мы рассмотрим его применение в составе фильтра feSpecularLighting. Значения одноименных атрибутов фильтров feSpotLight и fePointLight совпадают. Описание собственных атрибутов фильтра feSpotLight приводится в табл. 10.7:

Атрибуты фильтра feSpotLight.
№ Название
10.7.1 pointsAtX, pointsAtY, pointsAtZ
Описание
Центровка середины источника и его области рассеянного света. Именно этот набор атрибутов позволяет изменять вид источника с получением кометного эффекта.
Диапазон значений
<number>
Значение по умолчанию
0
№ Название
10.7.2 limitingConeAngle
Описание
Величина угла конуса, ограничивающего распространение света.
Диапазон значений
<number>
Значение по умолчанию
-

В табл. 10.8 приводятся примеры использования фильтра feSpotLight.

Фильтр feSpotLight.
№ Код Вид в браузере
10.8.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="200" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpotLight1.svg
     </desc>
     
<defs>

    <filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
      <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="100" y="100" z="30" 
             pointsAtX="100" pointsAtY="100" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
    </filter>


</defs>

  <rect x="0" y="0" width="200" height="200" 
      style="fill: blue"/>
  <rect x="0" y="0" width="200" height="200" 
      style="filter: url(#myFilter)"/>
</svg>
Описание
Этот пример очень похож на применение фильтра fePointLight (см. fePointLight1.svg), поскольку значения атрибутов координат попарно совпадают: x="100" y="100" pointsAtX="100" pointsAtY="100"
№ Код Описание
10.8.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpotLight2.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="75" y="75" z="30" 
             pointsAtX="25" pointsAtY="25" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
 <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="225" y="75" z="30" 
             pointsAtX="275" pointsAtY="125" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
 <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="375" y="75" z="30" 
             pointsAtX="425" pointsAtY="25" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="75" y="225" z="30" 
             pointsAtX="25" pointsAtY="275" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="225" y="225" z="30" 
             pointsAtX="200" pointsAtY="225" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="375" y="225" z="30" 
             pointsAtX="375" pointsAtY="200" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size:12px">
      pointsAtX="25" (75) </text>
<text x="10" y="27" style="fill: white; font-size:12px">
       pointsAtY="25" (75)</text>
     
<text x="160" y="15" style="fill: white; font-size: 12px">
      pointsAtX="275" (225)  </text>
<text x="160" y="27" style="fill: white; font-size: 12px">
      pointsAtY="125" (75)  </text>
     
<text x="304" y="15" style="fill: white; font-size: 12px">
      pointsAtX="425" (375) </text>
<text x="304" y="27" style="fill: white; font-size: 12px">
       pointsAtY="25" (75)</text>
     
<text x="5" y="165" style="fill: white; font-size: 12px">
      pointsAtX="25" (75) </text>    
<text x="5" y="177" style="fill: white; font-size: 12px">
      pointsAtY="275" (225)</text>  
     
<text x="160" y="165" style="fill: white; font-size: 12px">
      pointsAtX="200" (225) </text>
<text x="160" y="177" style="fill: white; font-size: 12px">
       pointsAtY="225" (225) </text>

     
<text x="310" y="165" style="fill: white; font-size: 12px">
      pointsAtX="375" (375) </text>
<text x="310" y="177" style="fill: white; font-size: 12px">
      pointsAtY="200" (225)</text>

     
</svg>
 Изменение расположения"хвоста" кометы при задании атрибутов pointsAtX и pointsAtY. В скобках для каждого атрибута указано соответствующее значение координаты.
Вид в браузере
№ Код Описание
10.8.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 10. Фильтры. Часть IV </title>
     <desc>
          Пример feSpotLight3.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="25" y="25" z="50" 
             pointsAtX="125" pointsAtY="125" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="90"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
 <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="175" y="25" z="50" 
             pointsAtX="275" pointsAtY="125" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="45"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
 <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="325" y="25" z="50" 
             pointsAtX="425" pointsAtY="125" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="30"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
  <feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="25" y="175" z="50" 
             pointsAtX="125" pointsAtY="275" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="15"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="175" y="175" z="50" 
             pointsAtX="275" pointsAtY="275" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="10"/>
      </feSpecularLighting>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feSpecularLighting in="SourceGraphic" surfaceScale="3" 
                    specularConstant="4"
        specularExponent="10" lighting-color="yellow">
      <feSpotLight x="325" y="175" z="50" 
             pointsAtX="425" pointsAtY="275" pointsAtZ="0"
          specularExponent="10" limitingConeAngle="5"/>
      </feSpecularLighting>
</filter>

</defs>

  <rect x="0" y="0" width="450" height="300" 
      style="fill: blue"/>


<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)" />
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)" />
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)" />
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)" />
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)" />
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)" />


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="150" y="0" width="150" height="300" 
      style="fill:none;stroke:black; stroke-width:2" />
<rect x="0" y="150" width="450" height="150" 
      style="fill:none;stroke:black; stroke-width:2" />

<!--Подписи-->
<text x="10" y="15" style="fill: white; font-size:12px">
      limitingConeAngle="90"</text>
<text x="160" y="15" style="fill: white; font-size: 12px">
      limitingConeAngle="45"  </text>
<text x="304" y="15" style="fill: white; font-size: 12px">
      limitingConeAngle="30" </text>
<text x="5" y="165" style="fill: white; font-size: 12px">
      limitingConeAngle="15"</text>    
<text x="160" y="165" style="fill: white; font-size: 12px">
      limitingConeAngle="10"</text>
<text x="310" y="165" style="fill: white; font-size: 12px">
      limitingConeAngle="5" </text>

</svg>
 Ограничение области распространения света при помощи атрибута limitingConeAngle.
Вид в браузере

Во всех рассмотренных примерах расположения источника света в качестве подложки использовался синий прямоугольник. Попробуйте самостоятельно заменить его растровым изображением, а также включить его в состав фильтра.

feConvolveMatrix

Фильтр feConvolveMatrix позволяет размывать изображение в горизонтальном или вертикальном направлениях. Его структура имеет следующий вид (рис. 10.6):

(рис 10.6) Структура фильтра feConvolveMatrix

Некоторые атрибуты этого фильтра представляют собой весьма тонкие настройки, которые не могут быть наглядно отображены в чистом виде, без взаимодействия с другими фильтрами. В табл. 10.9 приводится описание некоторых атрибутов этого фильтраПолное описание атрибутов и формулы преобразования смотрите в спецификации: http://www.w3.org/TR/2003/REC-SVG11-20030114/filters.html .

Атрибуты фильтра feConvolveMatrix.
№ Название
10.9.1 order
Описание
Значение атрибута, представляет собой пару чисел, задающую направление размытия. Одно из чисел должно быть равным количеству значений, определяемых в атрибуте kernel Matrix. Например, атрибут определяется так: kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1" Общее число значений равно 15. Значит, атрибут может быть определен как order="15,1" или order ="1,15". В первом случае размытие будет по горизонтали, во втором - по вертикали.
Диапазон значений
<number>, <number>
Значение по умолчанию
3
№ Название
10.9.2 kernelMatrix
Описание
Степень размытия, задается в виде набора значений. Чем больше количество значений, тем больше степень размытия.
Диапазон значений
Набор <number>
Значение по умолчанию
-
№ Название
10.9.3 divisor
Описание
Управление яркостью изображения. При значении, равном количеству чисел атрибута kernelMatrix яркость остается неизменной. При меньших значениях яркость увеличивается. При больших - наоборот, уменьшается.
Диапазон значений
Сумма значений <number>
Значение по умолчанию
-
№ Название
10.9.4 edgeMode
Описание
Порядок преобразования пикселей изображения.
Диапазон значений
duplicate | wrap | none
Значение по умолчанию
duplicate
№ Название
10.9.5 preserveAlpha
Описание
При значении false этого атрибута преобразование будет применяться ко всем каналам, включая прозрачность A. При значении true преобразование будет происходить в каналах RGB с сохранением исходной прозрачности..
Диапазон значений
false | true
Значение по умолчанию
false

Несмотря на сложность атрибутов этого фильтра, получать простое размытие изображения достаточно легко. В табл. 10.10 приводятся такие примеры.

Фильтр feConvolveMatrix.
№ Код Вид в браузере
10.10.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="350" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix1.svg
     </desc>
     
<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="175" width="186" height="125">    
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="15,1" 
        kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>



</defs>
<image xlink:href="sea2.jpg" x="10" y="175" 
       width="186" height="125"
       style="filter: url(#myFilter)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea2.jpg"/>

</svg>
Описание
Горизонтальное размытие. Количество значений атрибута kernelMatrix равно 15.
№ Код Описание
10.10.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix2.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="15,1" 
        kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
       preserveAlpha="true" order="1,15" 
       kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="12,1" 
        kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
       preserveAlpha="true" order="6,1" 
       kernelMatrix="0 1 2 3 4 5"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
      preserveAlpha="true" order="1,6" 
      kernelMatrix="0 1 2 3 4 5"/>
</filter>


</defs>

<image xlink:href="sea2.jpg" x="215" y="10" 
    width="186" height="125"
    style="filter: url(#myFilter1)"/>
<image xlink:href="sea2.jpg" x="10" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter2)"/>
<image xlink:href="sea2.jpg" x="215" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter3)"/>
<image xlink:href="sea2.jpg" x="10" y="300" 
    width="186" height="125"
    style="filter: url(#myFilter4)"/>
<image xlink:href="sea2.jpg" x="215" y="300" 
    width="186" height="125"
    style="filter: url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea2.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
      sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
      order="15,1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
      order="1,15"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       order="12,1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
      order="6,1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
      order="1,6"</text>

</svg>
 Примеры горизонтального и вертикального размытия различной степени. При значении атрибута order="12,1", которое не содержит числа, равного количеству значений атрибута kernelMatrix, фильтр не изменяет изображение.
Вид в браузере
№ Код Описание
10.10.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>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix3.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="9,1" 
        kernelMatrix=" 4 5 6 4 5 6 4 5 6"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" preserveAlpha="true"
        order="1,9" kernelMatrix=" 4 5 6 4 5 6 4 5 6"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="60, 1" 
                                kernelMatrix="0 1 2 3 4 5 6 7 8 9 
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9 "/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="1, 60" 
                                kernelMatrix="0 1 2 3 4 5 6 7 8 9 
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9
                                    0 1 2 3 4 5 6 7 8 9 "/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" order="60, 1" 
                                kernelMatrix="1 1 1 1 1 1 1 1 1 1   
                                    1 1 1 1 1 1 1 1 1 1
                                    1 1 1 1 1 1 1 1 1 1
                                    1 1 1 1 1 1 1 1 1 1
                                    1 1 1 1 1 1 1 1 1 1
                                    1 1 1 1 1 1 1 1 1 1  "/>
</filter>

</defs>

<image xlink:href="sea2.jpg" x="215" y="10" 
    width="186" height="125"
    style="filter: url(#myFilter1)"/>
<image xlink:href="sea2.jpg" x="10" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter2)"/>
<image xlink:href="sea2.jpg" x="215" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter3)"/>
<image xlink:href="sea2.jpg" x="10" y="300" 
    width="186" height="125"
    style="filter: url(#myFilter4)"/>
<image xlink:href="sea2.jpg" x="215" y="300" 
    width="186" height="125"
    style="filter: url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea2.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
      sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       order="9,1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
      order="1,9"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
      order="60, 1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
      order="1, 60"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
      order="60, 1"</text>

</svg>
 Применение размытия высокой степени.
Вид в браузере
№ Код Описание
10.10.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>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix4.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" divisor="8"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="false" divisor="7"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" divisor="6"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" divisor="5"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
         preserveAlpha="true" divisor="4"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


</defs>

<image xlink:href="sea2.jpg" x="215" y="10" 
    width="186" height="125"
    style="filter: url(#myFilter1)"/>
<image xlink:href="sea2.jpg" x="10" y="155" 
    width="186" height="125"
    style="filter: url(#myFilter2)"/>
<image xlink:href="sea2.jpg" x="215" y="155"
    width="186" height="125"
    style="filter: url(#myFilter3)"/>
<image xlink:href="sea2.jpg" x="10" y="300"
    width="186" height="125"
    style="filter: url(#myFilter4)"/>
<image xlink:href="sea2.jpg" x="215" y="300"
    width="186" height="125"
    style="filter: url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125" 
       xlink:href="sea2.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
      sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
      divisor="8"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
      divisor="7"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       divisor="6"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
      divisor="5"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
      divisor="4"</text>

</svg>
 Сумма значений атрибута kernelMatrix равна 8: 1+0+1+0+1+0+1+0+1+0+1+0+1+0+1=8. Примеры увеличения яркости при значениях атрибута divisor меньших 8.
Вид в браузере
№ Код Описание
10.10.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>Лекция 10. Фильтры. Часть IV</title>
     <desc>
          Пример feConvolveMatrix5.svg
     </desc>
     
<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" 
        preserveAlpha="true" divisor="8"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap"
        preserveAlpha="false" divisor="9"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap"
        preserveAlpha="true" divisor="10"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap"
        preserveAlpha="true" divisor="11"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
  <feConvolveMatrix in="SourceGraphic" edgeMode="wrap"
        preserveAlpha="true" divisor="12"
        order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/>
</filter>


</defs>

<image xlink:href="sea2.jpg" x="215" y="10"
    width="186" height="125"
    style="filter: url(#myFilter1)"/>
<image xlink:href="sea2.jpg" x="10" y="155"
    width="186" height="125"
    style="filter: url(#myFilter2)"/>
<image xlink:href="sea2.jpg" x="215" y="155"
    width="186" height="125"
    style="filter: url(#myFilter3)"/>
<image xlink:href="sea2.jpg" x="10" y="300"
    width="186" height="125"
    style="filter: url(#myFilter4)"/>
<image xlink:href="sea2.jpg" x="215" y="300"
    width="186" height="125"
    style="filter: url(#myFilter5)"/>

<!--Исходное изображение-->
<image x="10" y="10" width="186" height="125"
    xlink:href="sea2.jpg"/>

<!--Подписи-->
<text x="10" y="145" style="fill: black; font-size: 12px">
      sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
      divisor="8"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
      divisor="9"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       divisor="10"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
      divisor="11"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
      divisor="12"</text>

</svg>
 Примеры уменьшения яркости при значениях атрибута divisor больших 8.
Вид в браузере

Мы рассмотрели все 19 фильтров SVG - графики. Теперь вы можете их использовать в различных сочетаниях для получения самых разнообразных художественных эффектов.

Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^