XML

Цель работы

Научиться работать с текстом в SVG, создавать SVG-изображения с помощью CorelDraw

Задания

Задание 1.1

Создайте текстовые объекты, используя теги:
- <text>, продемонстрируйте работу специальных атрибутов;
- <tspan>, измените их расположение относительно друг друга (атрибуты dx, dy);
- <textPath>.

Решение

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="250px">
    <text x="120" y="30" text-anchor="center" textLength="450" lengthAdjust="spacing">
        Textarea
        <tspan dx="10" dy="20" style="font-weight: 700; fill: #517bc9">Textarea</tspan>

        <path id="path" fill="coral" stroke="red" d="M10,90 Q90,90 90,45 
            Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50"/>
        <textPath href="#path">Textarea</textPath> 
    </text>
</svg>

Задание 1.2

Примените различные атрибуты CSS для стилизации текста.

Решение

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350px" height="100px">
    <text x="0" y="30" text-anchor="center" textLength="450" lengthAdjust="spacing">
        <style>
            tspan { 
                font-size: 24px; 
                font-weight: 500; 
                fill: #ff4800; 
                stroke: #00ccff; 
                stroke-width: 0.2px;
            }
        </style>

        <tspan>Textarea</tspan>
    </text>
</svg>

Задание 2.1

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

Решение

SVG

Задание 2.2

Создайте сложное изображение в CorelDraw, к примеру, применив эффекты Тень, Линза, Оболочка и т.п. Посмотрите полученный код, внесите изменения.

Решение

SVG

Задание 2.3

Создайте надпись, задайте ей фонтанную заливку/заливку узором. Также измените параметры в созданном коде (цвет, шрифт и т.п.).

Решение

SVG

Предыдущая лабораторная