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

Трансформации

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

Введение в трансформации

Самый простой способ изменить форму группы элементов – трансформировать ее как единое целое. В пакетах Corel Draw и Adobe Photoshop трансформация объекта – один из наиболее употребительных инструментов (рис. 6.1):

(рис 6.1) Трансформация групп объектов в пакетах Corel Draw и Adobe Photoshop

В SVG – графике все преобразования осуществляются при помощи атрибута transform, который поддерживает следующие команды:

  • translate(x, y) (трансляция, перенос) - перемещение объекта.
  • rotate(n) ( вращение) – поворот на заданный угол.
  • scale(x, y) ( масштабирование) – изменение геометрических размеров объекта.
  • skewX(n)/skewY(n) ( искажение) – смещение объекта вдоль горизонтальное и\или вертикальной оси.
  • matrix(a, b, c, d, e, f) – задание параметров трансформации в виде матрицы.
    •

    Команды атрибута transform аддитивны, то есть при последовательном применении нескольких команд результат будет представлять собой сумму отдельных преобразований.

    Translate

    Команда translate представляет собой перенос начала системы отсчета в новую точку с заданными координатами. Рассмотрим следующий фрагмент кода:

    <rect x="25" y="25" width="50" height="25"
      fill="skyblue" stroke="red" stroke-width="2"/>

<rect x="25" y="25" width="50" height="25"
      fill="palegreen" stroke="red" stroke-width="2"
      transform="translate(100,75)"/>

    Координаты обоих прямоугольников и их геометрические размеры совпадают. Следовательно, на рисунке второй прямоугольник должен был бы наложится на первый. Но для второго прямоугольника была применена команда translate и теперь начало его собственной системы координат располагается в точке 100, 75 (рис. 6.2):

    (рис 6.2) Применение команды translate

    В одном SVG – документе для разных объектов команда translate может применяться с различными координатами. В табл. 6.1 приводятся примеры использования этой команды.

    Команда translate
    № Код Вид в браузере
    6.1.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title> Лекция 6. Трансформации </title>
  <desc>
     Пример translate1.svg
  </desc>
  <rect x="25" y="25" width="50" height="25"
        fill="skyblue" stroke="red" stroke-width="2"/>
  <rect x="25" y="25" width="50" height="25"
        fill="palegreen" stroke="red" stroke-width="2"
        transform="translate(100,75)"/>
</svg>
    Описание
    На рисунке располагаются два прямоугольника – исходный и трансформированный.
    № Код Вид в браузере
    6.1.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 6. Трансформации </title>
     <desc>
          Пример translate2.svg
     </desc>
     <rect x="25" y="25" width="50" height="25"
              fill="skyblue" stroke="red" stroke-width="2"/>
     <g transform="translate(100,75)">
     <rect x="25" y="25" width="50" height="25"
              fill="palegreen" stroke="red" stroke-width="2"/>
     </g>
</svg>
    Описание
    Применение команды translate для элемента g. Внутри группы расположен один элемент
    № Код Вид в браузере
    6.1.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     viewBox="0 0 1000 1200">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример translate3.svg
     </desc>

     <circle cx="500" cy="400"  r="300" fill="lightskyblue"
              stroke="blue" stroke-width="30"/>
     <ellipse cx="500" cy="500"  rx="150" ry="100"
                 fill="none" stroke="blue" stroke-width="30"/>
     <rect x="300" y="370" width="400" height="130"
            fill="lightskyblue"/>
     <ellipse cx="350" cy="300"  rx="100" ry="50"
               fill="white" stroke="blue" stroke-width="30"/>
     <ellipse cx="650" cy="300"  rx="100" ry="50"
               fill="white" stroke="blue" stroke-width="30"/>
     <circle cx="350" cy="300"  r="25" fill="black"/>
     <circle cx="650" cy="300"  r="25" fill="black"/>

     <g transform="translate(500,400)">

     <circle cx="500" cy="400"  r="300" fill="lightskyblue"
              stroke="blue" stroke-width="30"/>
     <ellipse cx="500" cy="500"  rx="150" ry="100"
               fill="none" stroke="blue" stroke-width="30"/>
     <rect x="300" y="370" width="400" height="130"
            fill="lightskyblue"/>
     <ellipse cx="350" cy="300"  rx="100" ry="50"
               fill="white" stroke="blue" stroke-width="30"/>
     <ellipse cx="650" cy="300"  rx="100" ry="50"
               fill="white" stroke="blue" stroke-width="30"/>
     <circle cx="350" cy="300"  r="25" fill="black"/>
     <circle cx="650" cy="300"  r="25" fill="black"/>

     </g>

     </svg>
    Описание
    Применение команды translate для элемента g. Внутри группы расположено несколько элементов.
    № Код Вид в браузере
    6.1.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример translate4.svg
     </desc>

 <text x="10" y="30" font-family="Comic Sans MC"
        font-size="24" fill="green">
   translate
 </text>
 <text x="10" y="30" font-family="Comic Sans MC"
        font-size="24" fill="green" transform="translate(30,30)">
   translate
 </text>
</svg>
    Описание
    Трансформация текста.

    Rotate

    Команда rotate поворачивает систему координат относительно точки отсчета на задаваемый угол (рис. 6.3):

    (рис 6.3) Применение команды rotate

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

    Команды rotate и translate.
    № Код Вид в браузере
    6.2.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="210"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример rotate1.svg
     </desc>
     <!--Исходная фигура-->
     <g>
          <rect x="105" y="4" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="4" width="50" height="25"
               fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Повернутая фигура-->
     <g transform="rotate(45)" >
          <rect x="105" y="4" width="100" height="50"
                 fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="4" width="50" height="25"
                 fill="green" stroke="red" stroke-width="4"/>
     </g>

</svg>
    Описание
    Поворот системы координат на 45 градусов. Фигура поворачивается и смещается.
    № Код Вид в браузере
    6.2.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="210" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример rotate2.svg
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="105" y="4" width="100" height="50"  
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="4" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Повернутая фигура-->
     <g transform="rotate(45, 105, 4)" >
          <rect x="105" y="4" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="4" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

</svg>
    Описание
    Для получения поворота фигуры вокруг своей оси после поворота начало отсчета было перенесено в точку 105,4 при помощи встроенного конструктора команды rotate.
    № Код Вид в браузере
    6.2.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="210"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример rotate3.svg
     </desc>
     <!--Исходная фигура-->
     <g>
         <rect x="105" y="4" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="4" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Повернутая фигура-->
     <g transform=" translate(105,4) rotate(45)  translate(-105,-4)" >
          <rect x="105" y="4" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="4" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
</svg>
    Описание
    Для получения поворота фигуры вокруг своей оси после поворота начало отсчета было перенесено при помощи отдельных команд translate.
    № Код Вид в браузере
    6.2.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример rotate4.svg
     </desc>
    <text x="50" y="10" font-size="16" 
          fill="blue" transform="rotate(45)">
    Поворот
     </text>
</svg>
    Описание
    Поворот текста. См. tspan13.svg

    Scale

    Команда scale позволяет масштабировать объект с указанием кратности вдоль горизонтальной и вертикальной осей (рис. 6.4):

    (рис 6.4) Применение команды scale

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

    transform="scale(2, 3)"
transform="scale(2)"

    В первом случае будет произведено двукратное масштабирование по горизонтали и трехкратное по вертикали, а во втором случае коэффициенты масштабирования по горизонтали и вертикали будут совпадать и равняться 2. В табл. 6.3 приведены примеры использования этой команды.

    Команда scale.
    № Код Вид в браузере
    6.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="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale1.svg
     </desc>
     <rect x="25" y="25" width="50" height="25"
           fill="skyblue" stroke="red" stroke-width="2"/>
     <rect x="25" y="50" width="50" height="25"
           fill="palegreen" stroke="red" stroke-width="2"
           transform="scale(1,1)"/>
</svg>
    Описание
    Применение команды scale с масштабом, равным 1, не изменяет размеров прямоугольника ( Для сопоставления прямоугольники смещены y="25" и y="50" ).
    № Код Вид в браузере
    6.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="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale2.svg
     </desc>
     <rect x="25" y="25" width="50" height="25"
           fill="skyblue" stroke="red" stroke-width="2"/>
     <rect x="25" y="50" width="50" height="25"
           fill="palegreen" stroke="red" stroke-width="2"
           transform="scale(2,1)"/>
</svg>
    Описание
    Увеличение прямоугольника в два раза по горизонтали.
    № Код Вид в браузере
    6.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="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale3.svg
     </desc>
     <rect x="25" y="25" width="50" height="25"
           fill="skyblue" stroke="red" stroke-width="2"/>
     <rect x="25" y="50" width="50" height="25"
           fill="palegreen" stroke="red" stroke-width="2" 
           transform="scale(1,2)"/>
</svg>
    Описание
    Увеличение прямоугольника в два раза по вертикали.
    № Код Вид в браузере
    6.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="200" height="130"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale4.svg
     </desc>
     <rect x="25" y="25" width="50" height="25"
           fill="skyblue" stroke="red" stroke-width="2"/>
     <rect x="25" y="25" width="50" height="25"
           fill="palegreen" stroke="red" stroke-width="2" 
           transform="scale(2,2)"/>
</svg>
    Описание
    Увеличение прямоугольника в два раза по горизонтали и вертикали. Исходные прямоугольники имеют абсолютно одинаковые координаты.
    № Код Вид в браузере
    6.3.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="130"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale5.svg
     </desc>
     <rect x="25" y="25" width="50" height="25"  
           fill="skyblue" stroke="red" stroke-width="2"/>
     <rect x="25" y="25" width="50" height="25"
           fill="palegreen" stroke="red" stroke-width="2" 
           transform="scale(2)"/>
</svg>
    Описание
    Увеличение прямоугольника в два раза по горизонтали и вертикали при указании одного параметра в команде scale.
    6.3.6 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" 
     viewBox="0 0 1000 1200">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale6.svg
     </desc>
     <circle cx="500" cy="400"  r="300" 
             fill="lightskyblue"  
             stroke="blue" stroke-width="30"/>
     <ellipse cx="500" cy="500"  rx="150" ry="100" 
             fill="none" 
             stroke="blue" stroke-width="30"/>
     <rect x="300" y="370" width="400" height="130"  
           fill="lightskyblue"/>
     <ellipse cx="350" cy="300"  rx="100" ry="50" 
              fill="white" stroke="blue" stroke-width="30"/>
     <ellipse cx="650" cy="300"  rx="100" ry="50" 
              fill="white" stroke="blue" stroke-width="30"/>
     <circle cx="350" cy="300"  r="25" 
             fill="black"/>
     <circle cx="650" cy="300"  r="25" 
             fill="black"/>

     <g transform="translate(500,400) scale(0.7)">

     <circle cx="500" cy="400"  r="300" 
             fill="lightskyblue"  
             stroke="blue" stroke-width="30"/>
     <ellipse cx="500" cy="500"  rx="150" ry="100" 
              fill="none" stroke="blue" stroke-width="30"/>
     <rect x="300" y="370" width="400" height="130"  
           fill="lightskyblue"/>
     <ellipse cx="350" cy="300"  rx="100" ry="50" 
              fill="white" stroke="blue" stroke-width="30"/>
     <ellipse cx="650" cy="300"  rx="100" ry="50" 
              fill="white" stroke="blue" stroke-width="30"/>
     <circle cx="350" cy="300"  r="25" 
             fill="black"/>
     <circle cx="650" cy="300"  r="25" 
             fill="black"/>
     </g>
</svg>
    Описание
    Применение команды scale для трансформации группы. Команда translate в данном случае применяется лишь для оформления.
    № Код Описание
    6.3.7 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale7.svg
     </desc>
     <text x="50" y="50" font-size="30" 
           fill="red" font-family="Arial">
           Текст
     </text>
     <text x="50" y="50" font-size="30" 
           fill="red" font-family="Arial" 
           transform="scale(3,1)">
           Текст
     </text>
     <text x="50" y="50" font-size="30" 
           fill="red" font-family="Arial" 
           transform="scale(1,3)">
           Текст
     </text>
     <text x="50" y="50" font-size="30" 
           fill="red" font-family="Arial" 
           transform="scale(3)">
           Текст
     </text>
</svg>
    		 Масштабирование текста
    Вид в браузере

    Отражение объектов

    Отражение объектов – одна из наиболее часто встречающихся задач при работе с любой графикой. Для SVG – документов сочетания команд scale и translate позволяет легко получать нужный результат (рис. 6.5):

    (рис 6.5) Отражение объекта при помощи команд scale и translate

    Исходная фигура находится в правой нижней части рисунка. При подстановке координат в конструктор команды их можно варьировать в некоторых пределах для получения определенного эффекта, например "перекрытия". Исходное изображение можно заменить отражением, если указывать смещение на длину и высоту фигуры (рис. 6.6):

    (рис 6.6) Замещение исходного изображения отражением

    В табл. 6.4 приводится различные варианты отражения объекта.

    Отражение фигуры при помощи команд scale и translate.
    № Код Вид в браузере
    6.4.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="110"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate1.svg
     </desc>
     <!--Исходная фигура (Нижняя правая)-->
     <g transform="scale(1,1) translate(0, 0)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
</svg>
    Описание
    Исходная фигура. Применение команд scale и translate с указанными параметрами не изменяет масштаба и расположения.
    № Код Вид в браузере
    6.4.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="110"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate2.svg
     </desc>
     <!--Нижняя левая фигура -->
     <g transform="scale(-1,1) translate(-210, 0)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
</svg>
    Описание
    Отражение фигуры справа налево со смещением на ширину.
    № Код Вид в браузере
    6.4.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="110"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate3.svg
     </desc>
     <!--Верхняя правая фигура -->
     <g transform="scale(1,-1) translate(0, -110)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
</svg>
    Описание
    Отражение фигуры снизу вверх со смещением на высоту.
    № Код Вид в браузере
    6.4.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="110"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate4.svg
     </desc>

     <!--Верхняя левая фигура -->
     <g transform="scale(-1,-1) translate(-210, -110)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
</svg>
    Описание
    Отражение фигуры справа налево и снизу вверх со смещением на ширину и высоту.
    № Код Вид в браузере
    6.4.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="110" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate5.svg
     </desc>

     <!--Исходная фигура (Нижняя правая)-->
     <g transform="scale(1,1) translate(0, 0)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"  
                fill="green" stroke="red" stroke-width="4"/>
     </g>

     <!--Нижняя левая фигура -->
     <g transform="scale(-1,1) translate(-210, 0)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

     <!--Верхняя правая фигура -->
     <g transform="scale(1,-1) translate(0, -110)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

     <!--Верхняя левая фигура -->
     <g transform="scale(-1,-1) translate(-210, -110)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

</svg>
    Описание
    Исходная фигура и три отражения.
    № Код Вид в браузере
    6.4.6 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate6.svg
     </desc>

     <!--Справа налево-->
     <g transform="scale(-1,1) translate(-310, 0)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

     <!--Вспомогательная рамка вокруг рисунка-->

     <rect x="100" y="50" width="110" height="60"
           fill="none" stroke="blue" stroke-width="2"/>
</svg>
    Описание
    Отражение фигуры справа налево с замещением исходной фигуры.
    № Код Вид в браузере
    6.4.7 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate7.svg
     </desc>
     <!--Снизу вверх-->
     <g transform="scale(1,-1) translate(0, -160)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Вспомогательная рамка вокруг рисунка-->
     <rect x="100" y="50" width="110" height="60"
           fill="none" stroke="blue" stroke-width="2"/>
</svg>
    Описание
    Отражение фигуры снизу вверх с замещением исходной фигуры.
    № Код Вид в браузере
    6.4.8 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate8.svg
     </desc>

     <!--Снизу вверх и справа налево-->
     <g transform="scale(-1,-1) translate(-310, -160)">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

     <!--Вспомогательная рамка вокруг рисунка-->

     <rect x="100" y="50" width="110" height="60"
           fill="none" stroke="blue" stroke-width="2"/>
</svg>
    Описание
    Отражение фигуры справа налево и снизу вверх с замещением исходной фигуры.
    № Код Вид в браузере
    6.4.9 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример scale_and_translate9.svg
     </desc>

     <!--Вспомогательная группа - исходная фигура-->
     <g>
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="black" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

     <!--Снизу вверх и справа налево-->
     <g transform="scale(-1,-1) translate(-310, -160)" opacity="0.6">
          <rect x="105" y="55" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="55" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

     <!--Вспомогательная рамка вокруг рисунка-->

     <rect x="100" y="50" width="110" height="60"
           fill="none" stroke="blue" stroke-width="2"/>
</svg>
    Описание
    При расположении фигуры бывает довольно трудно подобрать нужные координаты. Задачу можно упростить, если оставить исходный объект, а позиционирование осуществлять с полупрозрачной фигурой.

    SkewX, skewY

    Команды skewX и skewY предназначены для искажения формы фигуры в направлении горизонтальной и вертикальной осей (рис. 6.7):

    (рис 6.7) Команды skewX и skewY

    При использовании команды skewX абсциссы фигуры остаются прежними, а ординаты автоматически вычисляются по формуле Y*tg(n) где n – значение угла в градусах, принимаемое конструктором. Аналогично, применение команды skewY оставляет прежними ординаты, изменяя абсциссы по формуле X*tg(n). Допускается совместное использование этих команд – в этом случае эффект будет суммарным. В табл. 6.5 приводятся примеры использования этих команд.

    Команды skewX и skewY.
    № Код Вид в браузере
    6.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> Лекция 6. Трансформации </title>
     <desc>
          Пример skew1.svg
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"  
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
     <g transform=" translate(0,0) skewX(45)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
</svg>
    Описание
    Искажение фигуры в горизонтальном направлении. Заметно смещение верхней левой точки объекта относительно исходной фигуры.
    № Код Вид в браузере
    6.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="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример skew2.svg
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"  
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
     <g transform=" translate(-6,0) skewX(45)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
</svg>
    Описание
    Искажение фигуры в горизонтальном направлении с компенсацией смещения при помощи команды translate.
    № Код Вид в браузере
    6.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="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример skew3.svg
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
     <g transform=" translate(-6,0) skewX(235)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

</svg>
    Описание
    Искажение фигуры в горизонтальном направлении при угле 235 градусов (180+45). Заметно смещение верхней левой точки объекта относительно исходной фигуры.
    № Код Вид в браузере
    6.5.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример skew4.svg
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
     <g transform=" translate(-10,0) skewX(235)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

</svg>
    Описание
    Искажение фигуры в горизонтальном направлении при угле 235 градусов (180+45) с компенсацией смещения при помощи команды translate.
    № Код Вид в браузере
    6.5.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример skew5.svg
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
     <g transform=" translate(0,0) skewY(45)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

</svg>
    Описание
    Искажение фигуры в вертикальном направлении. Заметно смещение верхней левой точки объекта относительно исходной фигуры.
    № Код Вид в браузере
    6.5.6 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример skew6.svg
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
     <g transform=" translate(0,-6) skewY(45)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>

</svg>
    Описание
    Искажение фигуры в вертикальном направлении с компенсацией смещения при помощи команды translate.
    № Код Вид в браузере
    6.5.7 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 950">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример skew7.svg
     </desc>

     <circle cx="500" cy="400"  r="300" 
             fill="lightskyblue"  stroke="blue" stroke-width="30"/>
     <ellipse cx="500" cy="500"  rx="150" ry="100" 
              fill="none" stroke="blue" stroke-width="30"/>
     <rect x="300" y="370" width="400" height="130"
           fill="lightskyblue"/>
     <ellipse cx="350" cy="300"  rx="100" ry="50"
              fill="white" 
              stroke="blue" stroke-width="30"/>
     <ellipse cx="650" cy="300"  rx="100" ry="50"
              fill="white" 
              stroke="blue" stroke-width="30"/>
     <circle cx="350" cy="300"  r="25"
             fill="black"/>
     <circle cx="650" cy="300"  r="25"
             fill="black"/>

     <g transform="translate(-500,0) skewX(20) translate(0, -400) skewY(45) ">

     <circle cx="500" cy="400"  r="300" fill="lightskyblue"  
             stroke="blue" stroke-width="30"/>
     <ellipse cx="500" cy="500"  rx="150" ry="100" 
              fill="none" stroke="blue" stroke-width="30"/>
     <rect x="300" y="370" width="400" height="130"
           fill="lightskyblue"/>
     <ellipse cx="350" cy="300"  rx="100" ry="50"
              fill="white" stroke="blue" stroke-width="30"/>
     <ellipse cx="650" cy="300"  rx="100" ry="50" 
              fill="white" stroke="blue" stroke-width="30"/>
     <circle cx="350" cy="300"  r="25" fill="black"/>
     <circle cx="650" cy="300"  r="25" fill="black"/>

     </g>
</svg>
    Описание
    Совместное применение команд skewX и skewY.
    № Код Описание
    6.5.8 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример skew8.svg
     </desc>

    <text x="50" y="50" font-size="30"
          fill="red" font-family="Arial">
          Текст
    </text>
    <text x="50" y="50" font-size="30" 
          fill="red" font-family="Arial" 
          transform="skewX(45) translate(50,0)">
          Текст
    </text>
    <text x="50" y="50" font-size="30"
          fill="red" font-family="Arial"
          transform="skewY(45)">
          Текст
    </text>
    <text x="50" y="50" font-size="30"
          fill="red" font-family="Arial" 
          transform="skewX(45) skewY(45)">
          Текст
     </text>
</svg>
    		 Искажение текста.
    Вид в браузере

    Matrix

    Трансформация matrix представляет собой способ компактной записи серии преобразований. Графически эта команда не содержит собственных изменений объекта. Она лишь выражает применение одной или нескольких команд типа translation, rotate, scale, skewX и skewY. МатематическиЕсли вы видите слово "матрица" в первый раз (одноименный фильм не в счет) – не нужно пугаться. Для начала, что можно сделать – это прочитать лекцию здесь: http://www.intuit.ru/department/mathematics/intmath/11/intmath_11.html Если вы не до конца поняли этот материал, то ладно, для SVG – графики вы можете просто пользоваться готовыми формулами. Но для понимания почему все же преобразование может быть представлено в виде матрицы, советую обратиться к любому учебнику по линейной алгебре или аналитической геометрии. Превосходное, краткое и ясное изложение я нашел даже в учебнике "Дифференциальное и интегральное исчисления для ВТУЗов" Н. С. Пискунов, М., "Наука" 1970, Т2, глава XXI "Матрицы. Матричная запись систем и решений систем линейных дифференциальных уравнений"., все преобразования могут быть выражены в виде матрицы третьего порядка следующим образом:

    $$\left | \begin{array}{ccc} a c e \\ b d f \\ 0 0 1 \end{array} \right |$$

    Команда будет выглядеть так:

    matrix(a, b, c, d, e, f)

    Каждое из преобразований представляется своей матрицей и соответствующей командой matrix.

    Команда translation:

    $$\left | \begin{array}{ccc} 1 0 x \\ 0 1 y \\ 0 0 1 \end{array} \right | \\ matrix (1, 0, 0, 1, x, y)$$

    Команда rotate:

    $$\left | \begin{array}{ccc} cos(a) -sin(a) 0\\ sin(a) cos(a) 0 \\ 0 0 1 \end{array} \right | \\ matrix (cos(a), sin(a), –sin(a), cos(a), 0, 0)$$

    Команда scale:

    $$\left | \begin{array}{ccc} x 0 0\\ 0 y 0 \\ 0 0 1 \end{array} \right | \\ matrix (sx, 0, 0, sy, 0, 0)$$

    Команда skewX:

    $$\left | \begin{array}{ccc} 1 tg(a) 0\\ 0 1 0 \\ 0 0 1 \end{array} \right | \\ matrix (1, 0, tg(a), 1, 0, 0)$$

    Команда skewY:

    $$\left | \begin{array}{ccc} 1 0 0\\ tg(a) 1 0 \\ 0 0 1 \end{array} \right | \\ matrix (1, tg(a), 0, 1, 0, 0)$$

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

    Команда matrix.
    № Код Вид в браузере
    6.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="200" height="150"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример matrix1.svg ( translate1.svg)
     </desc>
     <rect x="25" y="25" width="50" height="25"  
           fill="skyblue" stroke="red" stroke-width="2"/>
     <rect x="25" y="25" width="50" height="25"  
           fill="palegreen" stroke="red" stroke-width="2" 
           transform="matrix(1, 0, 0, 1, 100,75)"/>
     <!-- transform="translate(100,75)-->
</svg>
    Описание
    Запись команды translate в форме matrix.
    № Код Вид в браузере
    6.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="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример matrix2.svg (scale2.svg)
     </desc>
     <rect x="25" y="25" width="50" height="25"  
           fill="skyblue" stroke="red" stroke-width="2"/>

     <rect x="25" y="50" width="50" height="25"  
           fill="palegreen" stroke="red" stroke-width="2" 
           transform="matrix(2, 0, 0, 1, 0, 0)"/>
     <!-- transform="scale(2,1)"-->
</svg>
    Описание
    Запись команды scale в форме matrix.
    № Код Вид в браузере
    6.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="210" height="210" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример matrix3.svg (rotate1.svg)
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="105" y="4" width="100" height="50"  
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="4" width="50" height="25"  
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Повернутая фигура-->
     <g transform="matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0)" >
          <rect x="105" y="4" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="105" y="4" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
          <!-- transform="rotate(45)"-->
     </g>
</svg>
    Описание
    Запись команды rotate в форме matrix.
    № Код Вид в браузере
    6.6.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="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример matrix4.svg (skew1.svg)
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
          <g transform="matrix(1, 0, 1, 1, 0, 0)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
          <!-- transform="skewX(45)"-->
     </g>
</svg>
    Описание
    Запись команды skewX в форме matrix. tg(45)=1
    № Код Вид в браузере
    6.6.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="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример matrix5.svg (skew5.svg)
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
          <g transform="matrix(1, 1, 0, 1, 0, 0)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     <!-- transform="skewY(45)"-->
     </g>
</svg>
    Описание
    Запись команды skewY в форме matrix. tg(45)=1

    Мы разобрали запись в виде матрицы отдельных команд. Немного более сложно обстоят дела с записью нескольких команд, например, translate и skew в виде одной матрицы. Результирующая матрица представляет собой произведение отдельных матриц. Рассмотрим для начала произведение матриц, содержащих по две строки и два столбца:

    $$\left | \begin{array}{cc} a_{11} a_{12} \\ a_{21} a_{22} \end{array} \right | ullet \left | \begin{array}{cc} b_{11} b_{12} \\ b_{21} b_{22} \end{array} \right | = \left | \begin{array}{cc} a_{11}\cdot b_{11} + a_{12}\cdot b_{21} a_{11}\cdot b_{12} + a_{12}\cdot b_{22} \\ a_{21}\cdot b_{11} + a_{22}\cdot b_{21} a_{21}\cdot b_{12} + a_{22}\cdot b_{22} \end{array} \right |$$

    Обратите внимание на индексы – индекс 12, к примеру, означает, что элемент b12 находится в первой строке и втором столбце. Результирующая матрица получается сложением и умножением отдельных элементов по следующей схеме (рис. 6.8):

    (рис 6.8) Умножение матриц второго порядка

    Аналогичным образом осуществляется умножение матриц третьего порядка:

    $$\left | \begin{array}{ccc} a_{11} a_{12} a_{13}\\ a_{21} a_{22} a_{23}\\ a_{31} a_{32} a_{33} \end{array} \right | ullet \left | \begin{array}{ccc} b_{11} b_{12} b_{13}\\ b_{21} b_{22} b_{23}\\ b_{31} b_{32} b_{33} \end{array} \right | = \\ \left | \begin{array}{ccc} a_{11}\cdot b_{11} + a_{12}\cdot b_{21}+ a_{13}\cdot b_{31} a_{11}\cdot b_{12} + a_{12}\cdot b_{22}+ a_{13}\cdot b_{32} a_{11}\cdot b_{13} + a_{12}\cdot b_{23}+ a_{13}\cdot b_{33}\\ a_{21}\cdot b_{11} + a_{22}\cdot b_{21}+ a_{23}\cdot b_{31} a_{21}\cdot b_{12} + a_{22}\cdot b_{22} + a_{23}\cdot b_{32} a_{21}\cdot b_{13} + a_{22}\cdot b_{23}+ a_{23}\cdot b_{33} \\ a_{31}\cdot b_{11} + a_{32}\cdot b_{21}+ a_{33}\cdot b_{31} a_{31}\cdot b_{12} + a_{32}\cdot b_{22} + a_{33}\cdot b_{32} a_{31}\cdot b_{13} + a_{32}\cdot b_{23}+ a_{33}\cdot b_{33} \end{array} \right |$$

    Для отдельного элемента результирующей матрицы, находящегося во второй строке первого столбца можно выделить схему (рис. 6.9):

    (рис 6.9) Умножение матриц третьего порядка

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

    Команда matrix для нескольких преобразований.
    № Код Вид в браузере
    6.7.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> Лекция 6. Трансформации </title>
     <desc>
          Пример matrixGroup1.svg (skew2.svg)
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
     <g transform="matrix(1, 0, 1, 1, -6, 0)" >
          <rect x="10" y="10" width="100" height="50"
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!-- transform="translate(-6,0) skewX(45)"-->

</svg>
    Описание
    Преобразование состоит из двух команд. Запишем их отдельные матрицы:
  • translate(-6,0):$$\left | \begin{array}{ccc} 1 0 -6\\ 0 1 0\\ 0 0 1 \end{array} \right |$$
  • skewX(45):$$\left | \begin{array}{ccc} 1 1 0\\ 0 1 0\\ 0 0 1 \end{array} \right |$$
    • Вычисляем произведение матриц:$$\left | \begin{array}{ccc} 1 0 -6\\ 0 1 0\\ 0 0 1 \end{array} \right | ullet \left | \begin{array}{ccc} 1 1 0\\ 0 1 0\\ 0 0 1 \end{array} \right | =\\ = \left | \begin{array}{ccc} 1\cdot 1+ 0 \cdot 1 + (-6) \cdot 0 1\cdot 1+ 0 \cdot 1 + (-6) \cdot 0 1\cdot 0+ 0 \cdot 0 + (-6) \cdot 1\\ 0\cdot 1+ 1 \cdot 1 + 0 \cdot 0 0\cdot 1+ 1 \cdot 1 + 0 \cdot 0 0\cdot 0+ 1 \cdot 0 + 0 \cdot 1\\ 0\cdot 1+ 0 \cdot 0 + 1 \cdot 0 0\cdot 1+ 0 \cdot 1 + 1 \cdot 0 0\cdot 0+ 0 \cdot 0 + 1 \cdot 1 \end{array} \right | = \\ = \left | \begin{array}{ccc} 1 1 -6\\ 0 1 0\\ 0 0 1 \end{array} \right |$$ tg(45)=1 Результирующая команда: matrix(1,0,1,1,-6,0)
    № Код Вид в браузере
    6.7.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="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1" 
     viewBox="0 0 1000 950">
     <title> Лекция 6. Трансформации </title>
     <desc>
          Пример matrixGroup2.svg (skew7.svg)
     </desc>

     <circle cx="500" cy="400"  r="300"
             fill="lightskyblue"
             stroke="blue" stroke-width="30"/>
     <ellipse cx="500" cy="500"  rx="150" ry="100"
              fill="none"
              stroke="blue" stroke-width="30"/>
     <rect x="300" y="370" width="400" height="130"
           fill="lightskyblue"/>
     <ellipse cx="350" cy="300"  rx="100" ry="50"
              fill="white" stroke="blue" stroke-width="30"/>
     <ellipse cx="650" cy="300"  rx="100" ry="50"
              fill="white" stroke="blue" stroke-width="30"/>
     <circle cx="350" cy="300" r="25"
             fill="black"/>
     <circle cx="650" cy="300" r="25"
             fill="black"/>

     <g transform="matrix(1.3640, 1, 0.3640, 1, -645.6, -400)">
     <!-- transform="translate(-500,0) skewX(20) 
          translate(0, -400) skewY(45)"-->

     <circle cx="500" cy="400"  r="300"
             fill="lightskyblue"  stroke="blue" stroke-width="30"/>
     <ellipse cx="500" cy="500"  rx="150" ry="100"
              fill="none" stroke="blue" stroke-width="30"/>
     <rect x="300" y="370" width="400" height="130"
           fill="lightskyblue"/>
     <ellipse cx="350" cy="300"  rx="100" ry="50"
              fill="white" stroke="blue" stroke-width="30"/>
     <ellipse cx="650" cy="300"  rx="100" ry="50"
              fill="white" stroke="blue" stroke-width="30"/>
     <circle cx="350" cy="300"  r="25"
             fill="black"/>
     <circle cx="650" cy="300"  r="25"
             fill="black"/>

     </g>

     </svg>
    Описание
    Преобразование состоит из четырех команд. Запишем их отдельные матрицы:
  • translate(-500, 0):$$\left | \begin{array}{ccc} 1 0 -500\\ 0 1 0\\ 0 0 1 \end{array} \right |$$
  • skewX(20):$$\left | \begin{array}{ccc} 1 0.3640 0\\ 0 1 0\\ 0 0 1 \end{array} \right |$$
  • translate(0, -400):$$\left | \begin{array}{ccc} 1 0 0\\ 0 1 -400\\ 0 0 1 \end{array} \right |$$
  • skewY(45):$$\left | \begin{array}{ccc} 1 0 0\\ 1 1 0\\ 0 0 1 \end{array} \right |$$
    • Результирующая матрица будет представлять собой произведение четырех матриц:$$\left | \begin{array}{ccc} 1 0 -500\\ 0 1 0\\ 0 0 1 \end{array} \right | ullet \left | \begin{array}{ccc} 1 0.3640 0\\ 0 1 0\\ 0 0 1 \end{array} \right | ullet \left | \begin{array}{ccc} 1 0 0\\ 0 1 -400\\ 0 0 1 \end{array} \right | ullet \left | \begin{array}{ccc} 1 0 0\\ 1 1 0\\ 0 0 1 \end{array} \right |$$ Вычисляем произведение первых двух матриц:$$\left | \begin{array}{ccc} 1 0 -500\\ 0 1 0\\ 0 0 1 \end{array} \right | ullet \left | \begin{array}{ccc} 1 0.3640 0\\ 0 1 0\\ 0 0 1 \end{array} \right | = \\ = \left | \begin{array}{ccc} 1\cdot 1 + 0 \cdot 0 + (-500) \cdot 0 1\cdot 0.3640 + 0 \cdot 1 + (-500) \cdot 0 1\cdot 0 + 0 \cdot 0 + (-500) \cdot 1 \\ 0\cdot 1 + 1 \cdot 0 + 0 \cdot 0 0\cdot 0.3640 + 1 \cdot 1 + 0 \cdot 0 0\cdot 0 + 1 \cdot 0 + 0 \cdot 1\\ 0\cdot 1 + 0 \cdot 0 + 1\cdot 0 0\cdot 0.3640 + 0 \cdot 1 + 1 \cdot 0 0\cdot 0 + 0 \cdot 0 + 1 \cdot 1 \end{array} \right | = \\ = \left | \begin{array}{ccc} 1 0.3640 -500\\ 0 1 0\\ 0 0 1 \end{array} \right |$$ Умножаем результат на третью матрицу:$$\left | \begin{array}{ccc} 1 0.3640 -500\\ 0 1 0\\ 0 0 1 \end{array} \right | ullet \left | \begin{array}{ccc} 1 0 0\\ 0 1 0\\ 0 0 1 \end{array} \right | = \\ = \left | \begin{array}{ccc} 1\cdot 1 + 0.3640 \cdot 0 + (-500) \cdot 0 1\cdot 0 + 0.3640 \cdot 1 + (-500) \cdot 0 1\cdot 0 + 0.3640 \cdot (-400) + (-500) \cdot 1 \\ 0\cdot 1 + 1 \cdot 0 + 0 \cdot 0 0\cdot 0 + 1 \cdot 1 + 0 \cdot 0 0\cdot 0 + 1 \cdot(-400) + 0 \cdot 1\\ 0\cdot 1 + 0 \cdot 0 + 1\cdot 0 0\cdot 0 + 0 \cdot 1 + 1 \cdot 0 0\cdot 0 + 0 \cdot (-400) + 1 \cdot 1 \end{array} \right | = \\ = \left | \begin{array}{ccc} 1 0.3640 -645.6\\ 0 1 -400\\ 0 0 1 \end{array} \right |$$ Наконец, результат умножаем на четвертую матрицу:$$\left | \begin{array}{ccc} 1 0.3640 -645.6\\ 0 1 -400\\ 0 0 1 \end{array} \right | ullet \left | \begin{array}{ccc} 1 0 0\\ 1 1 0\\ 0 0 1 \end{array} \right | = \\ = \left | \begin{array}{ccc} 1\cdot 1 + 0.3640 \cdot 1 + (-645.6) \cdot 0 1\cdot 0 + 0.3640 \cdot 1 + (-645.6) \cdot 0 1\cdot 0 + 0.3640 \cdot 0 + (-645.6) \cdot 1 \\ 0\cdot 1 + 1 \cdot 1 + (-400) \cdot 0 0\cdot 0 + 1 \cdot 1 + (-400) \cdot 0 0\cdot 0 + 1 \cdot 0 + (-400) \cdot 1\\ 0\cdot 1 + 0 \cdot 1 + 1\cdot 0 0\cdot 0 + 0 \cdot 1 + 1 \cdot 0 0\cdot 0 + 0 \cdot 0 + 1 \cdot 1 \end{array} \right | = \\ = \left | \begin{array}{ccc} 1.3640 0.3640 -645.6\\ 1 1 -400\\ 0 0 1 \end{array} \right |$$ tg(45)=1, tg(20) = 0.3640 Результирующая команда: matrix(1.3640,1,0.3640,1,-645.6,-400)

    Запись серии команд в виде матрицы позволяет сократить запись и, следовательно, уменьшить размер SVG – документа.

    Вычисление матриц в программе Mathcad

    Основная сложность применения команды matrix – это вычисление произведения матриц, представляющее собой довольно трудоемкую и кропотливую задачу. Пакет Mathcad (http://www.ptc.com/go/mathsoft) – мощное средство для решения широкого класса вычислительных задач, содержит удобные инструменты для работы с матрицами. После установки и запуска программы можно сразу приступать к вычислениям. В главном меню выбираем "Insert – Matrix" ( или нажимаем Ctrl+M) (рис. 6.10):

    (рис 6.10) Вставка матрицы

    В появившемся диалоговом окне выбираем матрицы размером 3х3 (рис. 6.11):

    (рис 6.11) Определение размера матрицы

    В документе появляется шаблон, в который можно вводить числа (рис. 6.12):

    (рис 6.12) Шаблон матрицы

    После завершения ввода вводим знак равенства "=" и программа автоматически отображает результирующую матрицу (рис. 6.13):

    (рис 6.13) Готовые матрицы

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

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